range-slider-nov
Version:
Change Your numeric value or numeric range value with dragging handles
72 lines (61 loc) • 1.9 kB
Markdown
# vue-simple-range-slider
Change Your numeric value or numeric range value with dragging handles
[Demo](https://csb-b2ovr.netlify.com/)
## 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
```html
<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```|
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8JJDU889K64AL)