1.1.4 • Public • Published


No Dependency only single vue component file

A vue component that accept values in props and return changed values in @input event

## View Demo

View Demo - codesandbox
View Demo - gh-pages


props type default description
min Number 0 Slider Minimum Value that user can set
max Number 100 Slider Maximum Value that user can Set
minValue Number 25 Slider range selected minimum value that will show default selected
maxValue Number 75 Slider range selected maximum value that will show default selected
step Number 1 Slider change value that will change when bar clicked or keyboard arrow key pressed
rangeMargin Number step Slider minValue and maxValue minimum difference. user cannot select less than rangeMargin value. If not specified then step value is min range. If rangeMargin is set to zero then user can select same minValue and maxValue
preventWheel Boolean false true then it not accept mouse wheel to change its value. false then (shift + wheel) change minValue (ctrl+wheel) change maxValue, (ctrl+shift+wheel) change both values
ruler Boolean true is ruler visible or not. sub-ruler is display when labels are set and step not equal to 1.
label Boolean true is label visible or not
labels Array [ ] list of label text display on ruler. If not set then min-max value show in label
minCaption String "" Display on Min-Thumb tool-tip caption text. if not passed then minValue will display.
maxCaption String "" Display on Max-Thumb tool-tip caption text. if not passed then maxValue will display.
baseClassName String "multi-range-slider" you can write your css or modify css file and apply that class. Example : "multi-range-slider-black"

keyboard shortcuts

keyboard shortcut Description
Shift+Wheel increment/decrement min value
Ctrl+Wheel increment/decrement max value
Ctrl+Shift+Wheel increment/decrement both values
Left Arrow Key decrement selected slider thumb min/max value
Right Arrow Key increment selected slider thumb min/max value

How to Install

copy following code and run on CLI

npm install multi-range-slider-vue

How to use

Example Code

download from gitHub


template sectioln


script section

import MultiRangeSlider from "multi-range-slider-vue";

components section

components: {

data section

data() {
    return {
      barMinValue: 10,
      barMaxValue: 90

methods section

methods: {
    UpdateValues(e) {
      this.barMinValue = e.minValue;
      this.barMaxValue = e.maxValue;

View Demo

View Demo - codesandbox
View Demo - gh-pages

License Free

Author : Govind Prasad Gupta


email :


npm i multi-range-slider-vue

DownloadsWeekly Downloads






Unpacked Size

88.6 kB

Total Files


Last publish


  • developergovindgupta