🌡A Highly Customized Slider Control Component For VueJS


Vue Slider Component is a simple Vue component for creating custom single and/or scope slider controls for your web user interface.

vue slidercarousel, vue slider component, vue range slider, vue slider example, vue slider events, vue range slider, vue card slider, nuxt range slider


  • 🍖 More customizable
  • 👗 Multiple style themes
  • 🐳 Support for more sliders
  • 📌 Add marks
  • 🎉 Support SSR
  • 🍒 Support Typescript

How to make use of it:

Install and download:

npm install vue-slider-component

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 use.

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

Custom Slider Control For VueJS, Vue Slider Component Plugin/Github

See Demo And Download

Official Website(NightCatSama): Click Here

This superior jQuery/javascript plugin is developed by NightCatSama. For extra Advanced usage, please go to the official website.