multi-range-slider-vue

MultiRangeSlider.vue

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

---

Properties

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	5	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. Can not less than step and should be multiple of step.
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

usase

template sectioln

<MultiRangeSlider
    :baseClassName="multi-range-slider"
    :min="0"
    :max="100"
    :step="10"
    :ruler="true"
    :label="true"
    :minValue="barMinValue"
    :maxValue="barMaxValue"
    @input="UpdateValues"
  />

script section

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

components section

components: {
    MultiRangeSlider
},

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

developergovindgupta

email : [e-mail]