/vue-simple-range-slider

Change Your numeric value or numeric range value with dragging handles

Primary LanguageVueMIT LicenseMIT

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