Slider 滑块

原生 <input type="range"> 增强的滑动条。

基础用法

基础用法

示例代码

范围与步长

min / max / step

示例代码

禁用

禁用

示例代码

刻度（marks 对象）

marks 对象：值 → 标签映射

示例代码

刻度（marks 数组）

marks 数组：仅数值，标签回退为数值文本

示例代码

拖动滑块时，当前值已到达的刻度点与标签会以主题色高亮；marks 同时支持 JSON 对象 {"值":"标签"} 与 JSON 数组 [值, 值] 两种写法（数组元素也可用 {"value": 26, "label": "26°C"}）。

事件

实时值与变化事件

示例代码

拖动过程派发 oas-input，松手派发 oas-change，detail.value 均为数值：

API

属性

属性	说明	类型	默认值
disabled	禁用	boolean	—
marks	刻度：JSON 对象 {"0":"0°C"}（值→标签）或 JSON 数组 [0,26,60]（也可为 {"value":26,"label":"26°C"}）；刻度点与标签显示在轨道下方，值经过处高亮	string | Record<string, string | number> | number[]	—
max	范围	string	100
min	范围	string	0
step	步长	string	1
value	当前值（受控）	string	—

事件

事件	说明
oas-change	松手确定，detail: { value }
oas-input	拖动中，detail: { value }