Change Your numeric value or numeric range value with dragging handles
npm install vue-simple-range-slider* Single value and range slider support
* Vue3 and Vue2 supports
* Exponential and linear scale support
* Keyboard support
* rtl support
_Requires Vue >=3.2.0 or >=2.7.0_
npm install vue-simple-range-slider
`
Or
`
yarn add vue-simple-range-slider
`$3
`html
style="width: 300px"
:min="0"
:max="1000000"
exponential
v-model="state.range"
>
$
style="width: 300px"
:min="0"
:max="20"
v-model="state.number"
/>
`$3
For Vue 2 import the component like this:
`javascript
import VueSimpleRangeSlider from "vue-simple-range-slider/vue2";
import "vue-simple-range-slider/vue2/css";
`$3
|Name |Type|Default|
|--- |---|---|
|value (vue2) |
`number` Or `[number,number]`||
|model-value (vue3) |`number` Or `[number,number]`||
|min |`number` |`0` |
|max |`number` |`100` |
|exponential |`boolean` |`false`|
|bar-color |`string` |`#bebebe`|
|active-bar-color |`string` |`#6699ff`|
|keep-just-significant-figures |`boolean` |`true`|
|significant-figures |`number` |`2`|
|popover-content-editable |`boolean` |`true`|$3
|Name |Type|
|--- |---|
|input (vue2) |`(number) => void` Or `([number,number]) => void`|
|update:model-value (vue3) |`(number) => void` Or `([number,number]) => void`|
$3
|Name |Type|
|--- |---|
|prefix |`{value: number}`|
|suffix |`{value: number}`|
|splitter |void`|