range-slider-vue
v1.0.3
Published
Simple slider component of Vue.js
Downloads
16
Readme
range-slider-vue
Simple range slider component of Vue.js
version: 1.0.3
Requirements
Vue >= 2.0
Installation
npm
npm install --save range-slider-vue
Usage
Import "RangeSlider" and use it in your components.
<template>
<div id="app">
<range-slider
:min="0" :max="1000" :step="100"
:start="range.start" :end="range.end"
@slideEnd="slideEnd">
</range-slider>
</div>
</template>
<script>
import RangeSlider from 'range-slider-vue';
export default {
name: 'app',
components: {
RangeSlider
},
data () {
return {
range: {
start: 100,
end: 900
}
}
},
methods: {
slideEnd(e) {
this.range.start = e.start;
this.range.end = e.end;
}
}
}
</script>
<style lang="scss">
* {
margin: 0;
padding: 0;
}
html,body,#app {
width: 100%;
}
</style>
Available props:
min
- min value(require)max
- max value(require)step
- granularity of the slider value(require)start
- init start valueend
- init end valueballWidth
- ball widthbarHeight
- track bar heightballColor
- ball colorroundColor
- range bar colortrackColor
- track bar color
Events:
slideEnd
- triggered when sliding and changing, you can get range values through event.start
and event.end