Custom Slider Control For VueJS

Install & Download:

npm install vue-slider-component


A simple Vue component for creating custom single and/or range slider controls for your web UI.

How to use it:

1. Import and register the component.

// globally
// main.js
import VueSlider from 'vue-slider-component'
Vue.component('VueSlider', VueSlider);
// locally
// App.vue
import VueSlider from 'vue-slider-component'
export default {
  components: {

2. Import a theme of your choice.

// default theme
import 'vue-slider-component/theme/default.css'
// material theme
import 'vue-slider-component/theme/material.css'
// antd theme
import 'vue-slider-component/theme/antd.css'

3. Basic usage.

<vue-slider v-model="value"></vue-slider>






v3.2.24 (12/06/2022)

  • Bugfix

v3.2.23 (11/02/2022)

  • Bugfix

v3.2.22 (10/29/2022)

  • Bugfix

v3.2.18 (07/13/2022)

  • fix: add component names

v3.2.17 (07/07/2022)

  • fix: zoom not work in reverse mode

v3.2.16 (06/23/2022)

  • Add es folder.

v3.2.15 (10/12/2021)

  • Bug Fixes

v3.2.14 (07/21/2020)

  • Bug Fixes

v3.2.10 (10/29/2020)

  • Add zoom prop to support zoomed scenes.

v3.2.9 (10/24/2020)

  • Bug Fixes

v3.2.6 (10/12/2020)

  • Bug Fixes: When contained is true, slider position is out of sync with mouse position.

v3.2.5 (08/20/2020)

  • Bug Fixes: An error occurred in ie11

v3.2.4 (08/12/2020)

  • Added dotAttrs prop to support setting custom attributes on the slider.

v3.2.3 (08/06/2020)

  • When data is Array<Object> type, an exception occurs when change the data.

v3.2.2 (07/08/2020)

  • data supports object type
  • Allow keyboard tab to access slider
  • useKeyboard default parameters changed from false to true

v3.2.0 (07/06/2020)

  • feat: Allow objects passed as data

Add Comment