Custom Slider Control For VueJS

Description:

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: {
    VueSlider
  }
}

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>

Preview:

custom-slider-control-for-vuejs-range-slider

custom-slider-control-for-vuejs-range-slider

custom-slider-control-for-vuejs-vertical-slider

Changelog:

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

Download Details:

Author: NightCatSama

Live Demo: https://nightcatsama.github.io/vue-slider-component/#/basics/simple

Download Link: https://github.com/NightCatSama/vue-slider-component/archive/master.zip

Official Website: https://github.com/NightCatSama/vue-slider-component

Install & Download:

npm install vue-slider-component

You Might Be Interested In:

Add Comment