ZHSW/zhsw_wechat: 智慧水务小程序 @ cb6ddd3787e1f0fe4cb15e2dff8c2143ac25facc

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

isComponent: true

引入

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

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

代码演示

在开发者工具中预览效果

Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"

组件类型

单游标滑块

双游标滑块

带数值滑动选择器

带刻度滑动选择器

组件状态

滑块禁用状态

特殊样式

胶囊型滑块

垂直状态

垂直方向的滑块

API

Slider Props

名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N colors | Array | [] | 已废弃。颜色，[已选择, 未选择]。TS 类型：Array<string> | N disabled | Boolean | undefined | 是否禁用组件 | 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 Events

Slider External Classes

FAQ

当 slider 外层使用 hidden 包裹，需要在 hidden = false 时，重新调用组件的 init 方法，才能正常渲染（在t-popup/t-dialog中同理）。如下：

<t-slider id="slider" />

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

$slider.init();

CSS Variables

README.md 5.6 KB 文件歷史 原始文件