vue-simple-range-slider

Change Your numeric value or numeric range value with dragging handles

Demo

Features

• Single value and range slider support
• Logarithmic and linear scale support
• Keyboard support
• rtl support

Requires Vue 2.2+

Getting Started

npm install vue-simple-range-slider

Or

yarn add vue-simple-range-slider

Example

<template>
  <div>
    <VueSimpleRangeSlider
                    style="width: 300px"
                    :min="0"
                    :max="1000000"
                    :logarithmic="true"
                    v-model="range"
            />
    <VueSimpleRangeSlider
                    style="width: 300px"
                    :min="0"
                    :max="20"
                    v-model="number"
            />
  </div>
</template>
<script>
import VueSimpleRangeSlider from 'vue-simple-range-slider';
import 'vue-simple-range-slider/dist/vueSimpleRangeSlider.css'
export default {
    // register the component
    components: { VueSimpleRangeSlider },
    data() {
          return {
               range: [20,1000],
               number: 10
          }
    }
}
</script>

Props

Name	Type	Default
value	number Or [number,number]
min	number	0
max	number	100
logarithmic	boolean	false
barColor	string	#bebebe
activeBarColor	string	#6699ff