0.1.10 • Published 3 years ago

range-slider-nov v0.1.10

Weekly downloads
-
License
-
Repository
github
Last release
3 years ago

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

NameTypeDefault
valuenumber Or [number,number]
minnumber0
maxnumber100
logarithmicbooleanfalse
barColorstring#bebebe
activeBarColorstring#6699ff

Donate