Range Slider Component With Histogram for Vue.js

vue-histogram-slider is a nice range slider component for selecting a range of numeric data just like a graph.

vue range slider codesandbox, vue histogram slider, react histogram slider, vue slider component, vue double range slider, range slider for vue js, vue js price range slider

Table of Contents

How to make use of it:

Install & Download:

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	A 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 the position of the left (or single) handle.
forceEdges	boolean	false	A slider will be always inside its container.
dragInterval	boolean	false	Allow user to drag the 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, which 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 then transform them into cool-looking dates.
lineHeight	number	6	Set slider line-height
transitionDuration	number	100	Set the 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 starts.
change	Triggers when each value change.
update	Triggers when the slider is modified by external methods update or reset.
finish	Triggers when user releases handle.