NightCatSama/vue-slider-component

NightCatSama/vue-slider-component has 2,415 GitHub stars and 334 forks. GitHot measured 0 stars in 24 hours and 0 in 7 days. Last checked 2026-11-12 15:39 UTC. Last push 2024-08-01.

How these counts are measured

🌡 A highly customized slider component

2,415 stars 334 forks

What you can do

🍖 More customizable
👗 Multiple style themes
🐳 Support for more sliders
🍒 Support Typescript

Measured star growth

in 24h: 0
in 7 days: 0
in 15 days: Collecting history
in 1 month: Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

🎚 A highly customized slider component

English | 简体中文 | Русский

🍉 Vue3.x

This is still in beta and may contain unexpected bugs, please use with caution.

install

$ yarn add vue-slider-component@next
# npm install vue-slider-component@next --save

Breaking Changes

value -> modelValue. (Official API Changes)

✨ Features

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

📚 Documentation

Document: https://nightcatsama.github.io/vue-slider-component

Live Demo: https://jsfiddle.net/NightCatSama/2xy72dod/10547/

🎯 install

$ yarn add vue-slider-component
# npm install vue-slider-component --save

🚀 Usage

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

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  components: {
    VueSlider,
  },

  data() {
    return {
      value: 0,
    }
  },
}
</script>

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

<script setup>
import { reactive, toRefs } from 'vue'
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'

export default {
  setup() {
    const data = reactive({ value: 0 })
    return toRefs(data)
  },
}
</script>