A Highly Customized Custom Slider Control Component For VueJS


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

custom range slider ios github, range slider html, range slider bootstrap 4, html range slider with labels, bootstrap range slider, vue slidercarousel, vue range slider, vue slider bar


  • 🍖 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, vue slider component, vue image slider, vue double range slider, vue slider events

See Demo And Download

Official Website(NightCatSama): Click Here

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