vue-simple-range-slider

Change your numeric value or numeric range value with dragging handles

Demo

Features

• 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

Getting Started

npm install vue-simple-range-slider

Or

yarn add vue-simple-range-slider

Example (Vue 3)

<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>

Vue 2

For Vue 2 import the component like this:

import VueSimpleRangeSlider from "vue-simple-range-slider/vue2";
import "vue-simple-range-slider/vue2/css";

Props

|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|

Events

|Name |Type| |--- |---| |input (vue2) |(number) => void Or ([number,number]) => void| |update:model-value (vue3) |(number) => void Or ([number,number]) => void|

Slots

|Name |Type| |--- |---| |prefix |{value: number}| |suffix |{value: number}| |splitter |void|