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|