Skip to content

ktsn/vue-range-slider

Repository files navigation

vue-range-slider

Build Status vue-range-slider Dev Token

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