154 lines
3.4 KiB
Markdown
154 lines
3.4 KiB
Markdown
# SliderRange 双滑块范围选择器
|
||
|
||
> 一个轻量级但功能强大的双滑块范围选择器组件，完美适配移动端和PC端，为您的项目提供直观的范围选择体验。
|
||
|
||
## 🌟 特性
|
||
|
||
- ✨ 灵活的范围设置 - 支持自定义最大最小值
|
||
- 📏 精确的步长控制 - 可设置数值变化的最小单位
|
||
- 🎨 丰富的样式定制 - 支持自定义滑块、轨道样式
|
||
- 📱 完美的跨端适配 - 支持H5/App/小程序多端使用
|
||
- 🔄 双向绑定支持 - 支持v-model语法
|
||
- 🎯 刻度线显示 - 直观的数值参考
|
||
- ⌨️ 键盘操作支持 - 提升无障碍体验
|
||
- 🚫 禁用状态 - 支持只读模式
|
||
|
||
## 📦 安装
|
||
|
||
### 下载使用
|
||
将 `llt-slider-range` 组件复制到你的项目中即可。
|
||
|
||
## 🚀 快速开始
|
||
|
||
### H5/App使用示例
|
||
```vue
|
||
<template>
|
||
<llt-slider-range v-model="rangeValue" />
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
rangeValue: [30, 50] // 设置初始范围值
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 微信小程序使用示例
|
||
```vue
|
||
<template>
|
||
<llt-slider-range
|
||
:model-value="rangeValue"
|
||
@change="handleChange"
|
||
/>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
rangeValue: [30, 50]
|
||
}
|
||
},
|
||
methods: {
|
||
handleChange(val) {
|
||
this.rangeValue = val
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 📝 API文档
|
||
|
||
### Props 属性
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
|--------|------|--------|------|
|
||
| modelValue/v-model | Array | [0, 100] | 当前选中的范围值 |
|
||
| min | Number | 0 | 最小可选值 |
|
||
| max | Number | 100 | 最大可选值 |
|
||
| step | Number | 1 | 步长，必须大于0 |
|
||
| disabled | Boolean | false | 是否禁用 |
|
||
| backgroundColor | String | '#F6F6F6' | 滑动条背景色 |
|
||
| activeColor | String | '#4DB8F6' | 选中范围的颜色 |
|
||
| blockSize | Number | 48 | 滑块大小(rpx) |
|
||
| blockColor | String | '#fff' | 滑块颜色 |
|
||
| format | Function | val => val | 数值格式化函数 |
|
||
|
||
### Events 事件
|
||
|
||
| 事件名 | 说明 | 回调参数 |
|
||
|--------|------|----------|
|
||
| update:modelValue | 值更新时触发 | (value: number[]) |
|
||
| change | 值变化时触发 | (value: number[]) |
|
||
|
||
## 💡 高级用法
|
||
|
||
### 价格范围选择器
|
||
```vue
|
||
<template>
|
||
<llt-slider-range
|
||
v-model="priceRange"
|
||
:min="0"
|
||
:max="10000"
|
||
:step="100"
|
||
:format="formatPrice"
|
||
active-color="#FF6B6B"
|
||
/>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
priceRange: [1000, 5000]
|
||
}
|
||
},
|
||
methods: {
|
||
formatPrice(val) {
|
||
return `￥${val}`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 温度选择器
|
||
```vue
|
||
<template>
|
||
<llt-slider-range
|
||
v-model="tempRange"
|
||
:min="-20"
|
||
:max="40"
|
||
:format="val => `${val}°C`"
|
||
active-color="#2196F3"
|
||
/>
|
||
</template>
|
||
```
|
||
|
||
## ⚠️ 注意事项
|
||
|
||
1. 确保传入的范围值在 min 和 max 之间
|
||
2. step 值必须为正数
|
||
3. 移动端使用时建议适当增大 blockSize 以提升触控体验
|
||
4. 小程序端需使用 model-value + change 事件方式实现双向绑定
|
||
5. 建议在父容器设置合适的宽度，以获得最佳显示效果
|
||
|
||
## 🔗 相关链接
|
||
|
||
- [GitHub 仓库](https://github.com/llt3677/slider-range)
|
||
- [插件市场](https://ext.dcloud.net.cn/plugin?id=21575)
|
||
- [问题反馈](https://github.com/llt3677/slider-range/issues)
|
||
|
||
## 📄 License
|
||
|
||
[MIT](https://opensource.org/licenses/MIT)
|
||
|
||
---
|
||
|
||
如果这个组件对你有帮助，欢迎 star ⭐️ 支持一下！
|