KeCheng/miniprogram/HuiYa/miniprogram_npm/tdesign-miniprogram/slider/README.md

title	description	spline	isComponent
Slider 滑动选择器	用于选择横轴上的数值、区间、档位。	data	true

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-slider": "tdesign-miniprogram/slider/slider"
}

代码演示

组件类型

单游标滑块

{{ base }}

双游标滑块

{{ range }}

带数值滑动选择器

{{ label }}

带刻度滑动选择器

{{ step }}

组件状态

滑块禁用状态

{{ disabled }}

特殊样式

胶囊型滑块

{{ capsule }}

API

Slider Props

名称	类型	默认值	说明	必传
colors	Array	[]	废弃。颜色，[已选择, 未选择]。TS 类型：Array<string>	N
disabled	Boolean	false	是否禁用组件	N
disabled-color	Array	[]	废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：Array<string>	N
external-classes	Array	-	组件类名，分别用于设置 组件外层元素、滑道底部、滑道激活态、滑道禁用态、游标 等元素类名。['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']	N
label	String / Boolean	false	滑块当前值文本。 值为 true 显示默认文案；值为 false 不显示滑块当前值文本； 值为 ${value}% 则表示组件会根据占位符渲染文案； 值类型为函数时，参数 value 标识滑块值，参数 position=start 表示范围滑块的起始值，参数 position=end 表示范围滑块的终点值。TS 类型：string | boolean	N
marks	Object / Array	{}	刻度标记，示例：[0, 10, 40, 200] 或者 { 5: '5¥', 10: '10%' }。TS 类型：Record<number, string> | Array<number>	N
max	Number	100	滑块范围最大值	N
min	Number	0	滑块范围最小值	N
range	Boolean	false	双游标滑块	N
show-extreme-value	Boolean	false	是否边界值	N
step	Number	1	步长	N
theme	String	default	0.30.0。滑块风格。可选项：default/capsule	N
value	Number / Array	0	滑块值。TS 类型：SliderValue type SliderValue = number | Array<number>。详细类型定义	N
default-value	Number / Array	undefined	滑块值。非受控属性。TS 类型：SliderValue type SliderValue = number | Array<number>。详细类型定义	N

Slider Events

名称	参数	描述
change	(value: SliderValue)	滑块值变化时触发
dragend	-	结束拖动时触发
dragstart	-	开始拖动时触发