vue-range-slider
vue-range-slider
Simple slider component of Vue.js
Features
- Compatible with native
input[type="range"]
behavior input
,change
event support- Touch device support
Requirements
Vue >= 2.0
Installation
NPM
npm install --save vue-range-slider
Yarn
yarn add vue-range-slider
Usage
Basic Usage
Just import vue-range-slider component and use it in your components. The props are compatible with native input[type="range"]
element, so you can use min
, max
, step
etc. like native element.
<template>
<range-slider
class="slider"
min="10"
max="1000"
step="10"
v-model="sliderValue">
</range-slider>
</template>
<script>
import RangeSlider from 'vue-range-slider'
// you probably need to import built-in style
import 'vue-range-slider/dist/vue-range-slider.css'
export default {
data () {
return {
sliderValue: 50
}
},
components: {
RangeSlider
}
}
</script>
<style>
.slider {
/* overwrite slider styles */
width: 200px;
}
</style>
Available props:
name
- name of the slider input.value
- current value of the slider.disabled
- if true, the slider value cannot be updated.min
- minimum value of the slider.max
- maximum value of the slider.step
- granularity of the slider value. e.g. if this is 3, the slider value will be 3, 6, 9, ...
Available slots:
knob
- slot for replacing knob
Overwrite Default Styles
vue-range-slider is built with Sass for its styling. If you want to customize vue-range-slider styles, you can easily do that by configuring Sass variables. Available variables can be seen in the component file.
Example of making the slider knob larger:
// set the variable of the knob size
$knob-size: 30px;
// import the built-in vue-range-slider style
@import '~vue-range-slider/dist/vue-range-slider.scss';
License
MIT
Dependencies
autoprefixer: ^8.1.0babel-core: ^6.26.0babel-eslint: ^8.2.2babel-loader: ^7.1.4babel-plugin-external-helpers: ^6.22.0babel-plugin-transform-class-properties: ^6.24.1babel-plugin-transform-flow-strip-types: ^6.22.0babel-preset-es2015: ^6.24.1babel-preset-power-assert: ^2.0.0cross-env: ^5.1.3css-loader: ^0.28.10eslint: ^4.18.2eslint-plugin-flowtype: ^2.46.1eslint-plugin-html: ^4.0.2flow-bin: ^0.66.0glob: ^7.1.2node-sass: ^4.7.2npm-run-all: ^4.1.2postcss: ^6.0.19postcss-loader: ^2.1.1power-assert: ^1.4.4rollup: ^0.56.4rollup-plugin-babel: ^3.0.3rollup-plugin-commonjs: ^9.0.0rollup-plugin-json: ^2.3.0rollup-plugin-multi-entry: ^2.0.2rollup-plugin-node-builtins: ^2.1.2rollup-plugin-node-globals: ^1.1.0rollup-plugin-node-resolve: ^3.0.3rollup-plugin-replace: ^2.0.0rollup-plugin-vue: ^3.0.0rollup-watch: ^4.3.1sass-loader: ^6.0.7style-loader: ^0.20.2testcafe: ^0.19.0testem: ^2.0.0uglifyjs: ^2.4.11vue: ^2.5.13vue-loader: ^14.1.1vue-template-compiler: ^2.5.13webpack: ^4.1.0webpack-cli: ^2.0.10webpack-dev-server: ^3.1.0