Range Slider

GITHUB

To create range slider element use this component.


Code:

  
HTML
<!-- Single (From, To Data) --> <fvRange v-model="rangeOne" :data="dateOne"> <!-- Single (Array Data) --> <fvRange v-model="rangeTwo" :data="dateTwo"> <!-- Multiple ([from, to]) --> <fvRange v-model="rangeThree" :data="dateThree" multiple>
  
Javascript
export default { data () { return { dataOne: { from: 1, to: 10 }, dataTwo: { from: 100, to: 150 }, dataThree: [100, 101, 102, 103, 105], rangeOne: undefined, rangeTwo: undefined, rangeThree: undefined } } }

Examples:










Notes:

  • If value prop contain non indexed item into data prop, fvRange will reset itself and fire input event with default value.

API:

NameTypeDefaultDescription
value*
---
---
Value of input. When multiple prop is true, it will be an Array with two index (like [value1, value2]) and if is not, it just value.
required
Boolean or Function
false
Does input required to fill? Also with function type you can pass function with one argument (fn(value){}) and return Boolean value.
disabled
Boolean
false
Does input disabled?
multiple
Boolean
false
Allow user to select two data.
data
Array or { from: Number, to: Number }
{ from: 1, to: 10 }
List of data. You can pass list of data (like [1, 2, 3, ...]) or object that contain from key with a Number value in it and to key with a bigger Number value in it.