# 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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
Last Updated: 7/21/2023, 2:12:46 PM