wm/pipIrr.git - Gitblit

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

isComponent: true

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

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

单游标滑块

双游标滑块

带数值滑动选择器

带刻度滑动选择器

滑块禁用状态

胶囊型滑块

垂直方向的滑块

名称	类型	默认值	说明	必传
colors	Array	[]	废弃。颜色，[已选择, 未选择]。TS 类型：`Array<string>`	N
disabled	Boolean	false	是否禁用组件	N
disabled-color	Array	[]	废弃。禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>`	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
vertical	Boolean	false	是否是垂直的滑块（渲染垂直滑块时，默认高度为400rpx，可通过修改`--td-slider-bar-height`来自定义高度）	N

当 slider 外层使用 hidden 包裹，需要在 hidden = false 时，重新调用组件的 init 方法，才能正常渲染。如下：

<t-slider id="slider" />

const $slider = this.selectComponent('#slider');

$slider.init();