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


How to make use of it:

Install & Download:

yarn add vue-histogram-slider

npm i vue-histogram-slider


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

Vue.component(HistogramSlider.name, HistogramSlider);

📋 Props

minnumber1Set slider minimum value
maxnumber100Set slider maximum value
dataarrayData for histogram
blockbooleanfalseLocks slider and makes it inactive
gridbooleantrueEnables grid of values.
gridNumnumber4A number of grid units.
stepnumber1Set sliders step. Always > 0. Could be fractional.
hideMinMaxbooleantrueHides min and max labels
hideFromTobooleanfalseHides from and to labels
toFixedbooleanfalseFix position of right handle.
fromFixedbooleanfalseFix the position of the left (or single) handle.
forceEdgesbooleanfalseA slider will be always inside its container.
dragIntervalbooleanfalseAllow user to drag the whole range. Only in double type
keyboardbooleantrueActivates keyboard controls. Move left: ←, ↓, A, S. Move right: →, ↑, W, D.
typestringdoubleChoose slider type, which could be single – for one handle, or double for two handles
widthnumber600width of dialog
barHeightnumber100Set max histogram bar height
barWidthnumber6Set histogram bar width
barGapnumber5Set histogram bar gap
barRadiusnumber4Set histogram bar radius
prettifyfunctionnullSet 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.
lineHeightnumber6Set slider line-height
transitionDurationnumber100Set the duration to histogram bars
primaryColorstring#0091ffPrimary color
labelColorstring#0091ffLabel color
holderColorstring#dee4ecHolder color
handleColorstring#ffffffSlider handle color
gridTextColorstringsilverPrimary color
fontFamilystring‘Arial, sans-serif’Set text font family
fontSizenumber12Set text font size
handleSizenumber26Slider handle size
histSliderGapnumber6Set gap between slider and histogram
updateColorOnChangebooleantrueUpdate histogram bar color on change (recommended false for performance)

🔧 Event

startTriggers when slider starts.
changeTriggers when each value change.
updateTriggers when the slider is modified by external methods update or reset.
finishTriggers when user releases handle.

Mobile-friendly Range Slider Control Component for Angular 6+

Beautiful Histogram Range Slider Component, vue-histogram-slider Plugin/Github

See Demo And Download

Official Website(oguzhaninan): Click Here

This superior jQuery/javascript plugin is developed by oguzhaninan. For extra advanced usage, please go to the official website.

Related Posts


Simple And Powerful Fullscreen Lightbox Plugin | fslightbox

Fullscreen Lightbox Basic is a modern and handy plug-in for displaying photos and videos in a clean overlay box. Showcase a single source or create a great…


Product Thumbnail Slider With Positive Zoom Effect jQuery

Positive Zoom is a JavaScript library for creating an image gallery where you can zoom in on the current image by hovering over it. Must Read: Pure…


Create Responsive Gauge Meter Using Pure CSS | CSSGauge

Pure CSS Gauge Meter Component, no SVG, or artboard is used in this component. This component can be easily distinguished by overriding the default style rules and…


Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window. A responsive, customizable, and…


Simple Time-Series Chart Viewer with HTML5 Canvas Javascript Library

Pixl chart library displays time series charts in the browser, using the HTML5 Canvas element. It is designed to be lightweight and efficient, while still providing a…


Neumorphic Design Inspiration Style CSS Shapes | Neumorphism

Multi-dimensional design is inspired by the physical world and adds textures, reflection, shadows, layers, and depths to the flat design making the UI elements more visible. CSS…