更新记录
1.0.2(2025-05-15) 下载此版本
更新
1.0.1(2025-05-15) 下载此版本
更新文档
1.0.0(2025-05-15) 下载此版本
发版
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
qiao-slider-range
uni-app 滑块区间选择组件
可根据具体需求,修改、自定义其他内容。
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | Array<Number, Number> | [0,100] | 滑块已选中区间的值 |
min | Number | 0 | 滑块区间最小值 |
max | Number | 100 | 滑块区间最大值 |
step | Number | 1 | 拖动时的步长 |
disabled | Boolean | false | 是否为禁用状态 |
height | Number | 50 | 滑块容器高度 |
barHeight | Number | 5 | 滑块进度条高度 |
backgroundColor | String | #e9e9e9 | 滑块进度条背景色 |
activeColor | String | #1aad19 | 已选中区间进度条颜色 |
blockSize | Number | 20 | 滑块大小 |
blockColor | String | #fff | 滑块颜色 |
fomat | Function | 滑块值提示文本格式化函数,注意:小程序中此属性必传,否则会报错,如果无需格式化,可以简单返回原始值: format(val) { return val } ;H5中可以不传。 |
使用示例
<qiao-slider-range
v-model="rangeValue"
:min="0"
:max="100"
:step="5"
:bar-height="3"
:block-size="26"
background-color="#EEEEF6"
active-color="#FF6B00"
:format="format"
@change="handleRangeChange"
></qiao-slider-range>
export default {
components: {},
data() {
return {
rangeValue: [10, 50]
}
},
methods: {
format(val) {
return val + '%'
},
handleRangeChange(e) {
console.log(e)
}
}
}