Range slider with histogram for Vue.js

by Vue.js Examples

vue-histogram-slider

Range slider with histogram for Vue.

View Demo View Github

? 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
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.

GitHub