Range Slider

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:

View Source

Single

Multiple

Disabled

Big Data

Custom Required

Sizes

Notes:

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

API:

Name	Type	Default	Description
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.

Name	Params	Description
input	newValue	Fired when component request to change value.

Name	Description
.fv-size-xs	XSmall size
.fv-size-sm	Small size
.fv-size-md	Medium size (actived by default)
.fv-size-lg	Large size
.fv-size-xl	XLarge size