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: 15 days 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 (3 months ago)
• Last Synced: 2024-10-14T13:03:16.083Z (30 days 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

[![downloads](https://img.shields.io/npm/dm/vue-slider-component.svg)][npm]

[![npm-version](https://img.shields.io/npm/v/vue-slider-component.svg)][npm]

[![license](https://img.shields.io/npm/l/express.svg)]()

> 🎚 一个高度定制化的滑块组件

[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