Simple slider component of Vue.js
Clone or download
Latest commit 3dc12ac Mar 6, 2018
Permalink
Failed to load latest commit information.
example test: Fix e2e test (#31) Mar 6, 2018
scripts test: Fix e2e test (#31) Mar 6, 2018
src fix: follow input/change event behavior for native input element Mar 6, 2018
test test: add test for clicking rail Mar 6, 2018
.babelrc Setup Sep 20, 2016
.eslintrc.yml Setup Sep 20, 2016
.flowconfig Setup Sep 20, 2016
.gitignore Setup e2e test Sep 24, 2016
.travis.yml test: Fix e2e test (#31) Mar 6, 2018
LICENSE Setup Sep 20, 2016
README.md fix docs Feb 1, 2018
package-lock.json 0.6.0 Mar 6, 2018
package.json 0.6.0 Mar 6, 2018
testem.yml Setup Sep 20, 2016

README.md

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