# tui-slider 滑动选择器 会员组件
介绍
滑动选择器,支持样式设置,支持区间选择。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiSlider from "@/components/thorui/tui-slider/tui-slider.vue"
export default {
components:{
tuiSlider
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
| App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|---|
| 升级中 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-slider": "/components/thorui/tui-slider/tui-slider"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
默认使用
changing 事件在滑动时触发,change 事件在滑动结束时触发。
<!--uni-app-->
<tui-slider @changing="changing" @change="change"></tui-slider>
<!--微信小程序-->
<tui-slider bindchanging="changing" bindchange="change"></tui-slider>
显示value值
通过 width 属性设置slider宽度,showValue 属性设置是否显示value值。
<!--uni-app-->
<tui-slider :width="width" showValue></tui-slider>
<!--微信小程序-->
<tui-slider width="{{width}}" showValue></tui-slider>
设置步长
通过 step 属性设置滑动步长。
<!--uni-app-->
<tui-slider :step="5"></tui-slider>
<!--微信小程序-->
<tui-slider step="{{5}}"></tui-slider>
区间选择
通过 section 属性设置是否为区间选择,默认为 false 。
<!--uni-app-->
<tui-slider section showValue @change="change"></tui-slider>
<!--微信小程序-->
<tui-slider section showValue bindchange="change"></tui-slider>
# Slots
| 插槽名称 | 说明 |
|---|---|
| start | 起始滑块内显示内容 |
| end | 结束滑块内显示内容,区间选择时有效 |
# Props
| 属性名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| width | Number | slider宽度,单位px | 240 |
| height | Number | slider高度,单位px | 4 |
| border | String | slider边框 | 0 |
| radius | String | slider圆角值 | 2px |
| min | Number | 最小值 | 0 |
| max | Number | 最大值 | 100 |
| step | Number | 步长,取值必须大于 0,并且可被(max - min)整除 | false |
| disabled | Boolean | 是否禁用 | 1 |
| value | Number | 当前取值(起始) | 0 |
| section | Boolean | 是否为区间选择/显示 | false |
| endValue | Number | 当前取值(结束),section为true时生效 | 0 |
| activeColor | String | 滑块左侧已选择部分的线条颜色 | #5677fc |
| backgroundColor | String | 滑块右侧背景条的颜色 | #e9e9e9 |
| blockWidth | Number | 滑块宽度,单位px | 20 |
| blockHeight | Number | 滑块高度,单位px | 20 |
| blockColor | String | 滑块背景颜色 | #fff |
| blockRadius | String | 滑块圆角 | 50% |
| blockShadow | String | 滑块阴影 | #b2b2b2 0 0 10rpx |
| blockBorder | String | 滑块边框 | 0 |
| showValue | Boolean | 是否显示当前value | false |
| position | String | value显示位置,可选值:top,bottom | top |
| valueFormat | String | value显示格式,如:¥value,显示时value会被替换成数值 | value |
| zIndex | Number | value框z-index值 | 10 |
| boxColor | String | value框颜色 | rgba(255,255,255,.9) |
| padding | String | value框padding值 | 2px 6px |
| valueColor | String | value字体颜色 | #333 |
| valueSize | Number | value字体大小,单位rpx | 30 |
# Events
注:uni-app端绑定事件使用@前缀,如@change;微信小程序原生使用bind前缀,如bindchange
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| changing | 拖动过程中触发的事件 | { value : value , endValue : 区间选择时返回 } |
| change | 完成一次拖动后触发的事件 | { value : value , endValue : 区间选择时返回 } |
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 特别说明
该组件为 会员组件,非开源内容,需开通会员才可获取使用。
# 线上程序扫码预览
![]() | ![]() | ![]() |
|---|---|---|
| ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |


