Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nightcatsama/vue-slider-component
🌡 A highly customized slider component
https://github.com/nightcatsama/vue-slider-component
range-slider slider sliders vue vue-component vue-range-slider vue-slider vue-slider-component vue3
Last synced: 1 day ago
JSON representation
🌡 A highly customized slider component
- Host: GitHub
- URL: https://github.com/nightcatsama/vue-slider-component
- Owner: NightCatSama
- License: mit
- Created: 2016-09-29T04:23:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-01T07:06:28.000Z (4 months ago)
- Last Synced: 2024-10-14T13:03:16.083Z (about 1 month ago)
- Topics: range-slider, slider, sliders, vue, vue-component, vue-range-slider, vue-slider, vue-slider-component, vue3
- Language: TypeScript
- Homepage: https://nightcatsama.github.io/vue-slider-component
- Size: 4.6 MB
- Stars: 2,413
- Watchers: 32
- Forks: 346
- Open Issues: 43
-
Metadata Files:
- Readme: README-CN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-slider-component
[][npm]
[][npm]
[]()
> 🎚 一个高度定制化的滑块组件
[English][en] | 简体中文 | [Русский][ru]
## 🍉 Vue3.x
目前仍然是测试版本，可能存在意想不到的 bug，请谨慎使用。
#### 安装
```bash
$ yarn add vue-slider-component@next
# npm install vue-slider-component@next --save
```
#### API 变化
- `value` -> `modelValue`. ([官方 API 变化](https://v3-migration.vuejs.org/breaking-changes/v-model.html#v-model))
## ✨ 新特性
- 🍖 更加可定制化
- 👗 多种样式主题
- 🐳 支持更多的滑块
- 📌 增加标志设置
- 🎉 支持 SSR
- 🍒 支持 Typescript
## 📚 文档
在线文档：
在线例子：
## 🎯 安装
```bash
$ yarn add vue-slider-component
# npm install vue-slider-component --save
```
## 🚀 使用
Vue 2
```vue
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
export default {
components: {
VueSlider,
},
data() {
return {
value: 0,
}
},
}
```
Vue 3
```vue
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)
},
}
```
## 更新日志
每个版本的[更新日志](https://github.com/NightCatSama/vue-slider-component/blob/master/CHANGELOG.md)。
## 支持
如果你喜欢这个组件，你也可以请我喝[咖啡](https://imgchr.com/i/ErWs1J) ☕。
## License
[MIT](https://github.com/NightCatSama/vue-slider-component/blob/master/LICENSE)
[npm]: https://www.npmjs.com/package/vue-slider-component
[en]: https://github.com/NightCatSama/vue-slider-component/blob/master/README.md
[ch]: https://github.com/NightCatSama/vue-slider-component/blob/master/README-CN.md
[ru]: https://github.com/NightCatSama/vue-slider-component/blob/master/README-RU.md