Change your numeric value or numeric range value with dragging handles
Requires Vue >=3.2.0 or >=2.7.0
npm install vue-simple-range-slider
Or
yarn add vue-simple-range-slider
<template>
<div>
<VueSimpleRangeSlider
style="width: 300px"
:min="0"
:max="1000000"
exponential
v-model="state.range"
>
<template #prefix="{ value }">$</template>
</VueSimpleRangeSlider>
<VueSimpleRangeSlider
style="width: 300px"
:min="0"
:max="20"
v-model="state.number"
/>
</div>
</template>
<script>
import VueSimpleRangeSlider from "vue-simple-range-slider";
import "vue-simple-range-slider/css";
import { reactive, defineComponent } from "vue";
export default defineComponent({
// register the component
components: { VueSimpleRangeSlider },
setup() {
const state = reactive({ range: [20, 1000], number: 10 });
return { state };
},
});
</script>
For Vue 2 import the component like this:
import VueSimpleRangeSlider from "vue-simple-range-slider/vue2";
import "vue-simple-range-slider/vue2/css";
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 |
Name | Type |
---|---|
input (vue2) | (number) => void Or ([number,number]) => void |
update:model-value (vue3) | (number) => void Or ([number,number]) => void |
Name | Type |
---|---|
prefix | {value: number} |
suffix | {value: number} |
splitter | void |