vue-histogram-slider

Range slider with histogram for vue.js
18,536 121
vue vuejs slider range-slider histogram histogram-slider
Install
npm install vue-histogram-slider
Latest Version:0.3.8
Vue:2
License:GPL-3.0
Last Updated:Jun 14, 2024
Links: GitHub  ·  npm
Maintainer: oguzhaninan

🚀 Quick Start

If you are a try and learn developer, you can start trying the vue-histogram-slider now using codesandbox.io.

📦 Installation

yarn

yarn add vue-histogram-slider

npm

npm i vue-histogram-slider

🔧 Usage

import Vue from 'vue';
import HistogramSlider from 'vue-histogram-slider';
import 'vue-histogram-slider/dist/histogram-slider.css';

Vue.component(HistogramSlider.name, HistogramSlider);

<HistogramSlider
    :width="600"
    :bar-height="100"
    :data="data"
/>

📋 Props

Property Type Default Description
min number 1 Set slider minimum value
max number 100 Set slider maximum value
data array - Data for histogram
block boolean false Locks slider and makes it inactive
grid boolean true Enables grid of values.
gridNum number 4 Number of grid units.
step number 1 Set sliders step. Always > 0. Could be fractional.
hideMinMax boolean true Hides min and max labels
hideFromTo boolean false Hides from and to labels
toFixed boolean false Fix position of right handle.
fromFixed boolean false Fix position of left (or single) handle.
forceEdges boolean false Slider will be always inside it's container.
dragInterval boolean false Allow user to drag whole range. Only in double type
keyboard boolean true Activates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
type string double Choose slider type, could be single - for one handle, or double for two handles
width number 600 width of dialog
barHeight number 100 Set max histogram bar height
barWidth number 6 Set histogram bar width
barGap number 5 Set histogram bar gap
barRadius number 4 Set histogram bar radius
prettify function null Set up your own prettify function. Can be anything. For example, you can set up unix time as slider values and than transform them to cool looking dates.
lineHeight number 6 Set slider line height
transitionDuration number 100 Set duration to histogram bars
primaryColor string #0091ff Primary color
labelColor string #0091ff Label color
holderColor string #dee4ec Holder color
handleColor string #ffffff Slider handle color
gridTextColor string silver Primary color
fontFamily string 'Arial, sans-serif' Set text font family
fontSize number 12 Set text font size
handleSize number 26 Slider handle size
histSliderGap number 6 Set gap between slider and histogram
updateColorOnChange boolean true Update histogram bar color on change (recommended false for performance)

🔧 Event

Name Description
start Triggers when slider start.
change Triggers when each values change.
update Triggers when slider is modified by external methods update or reset.
finish Triggers when user releases handle.

Related Packages

vue3-histogram-slider

Range slider with histogram for Vue 3

20,416 6
histogram histogram-slider range-slider slider vue vuejs
vue3-histogram-slider-v2

Range slider with histogram for Vue 3

2,179 0
histogram histogram-slider range-slider slider vue vuejs
vue-concise-slider

vue-slider,A simple sliding component,has easy configuration,support self-adapti...

125,004
slider vue swiper
vue-swipe

A touch slider for vue.js.

22,780 909
slider vue swipe
vue-monoplasty-slide-verify

vue slide verify

21,200 761
slider vue verify

Version History

Version Released License
0.3.8 GPL-3.0
0.3.7 GPL-3.0
0.3.6 GPL-3.0
0.3.4 GPL-3.0
0.3.3 GPL-3.0