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
Changelog:
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
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