Slider 滑块

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

基础用法

基础用法

示例代码

范围与步长

min / max / step

示例代码

禁用

禁用

示例代码

刻度（marks 对象）

marks 对象：值 → 标签映射

示例代码

刻度（marks 数组）

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

示例代码

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

带输入框联动

show-input 数值输入联动

示例代码

右侧数值输入框与滑块双向同步：拖动滑块实时更新输入框；输入数字后防抖 300ms 生效并自动夹取到 min/max 范围，Enter/失焦立即提交。

范围选择

range 双滑块区间 + 双输入框

示例代码

range 开启双滑块区间选择，value 为 JSON 数组 [lo, hi] 或逗号分隔字符串 "lo,hi"；与 show-input 搭配可分别编辑 min/max 两个输入框。输入越界时按「推着走」约束：min 输入超过 max 会推着 max 移动，反之亦然。

自定义滑块

custom-thumb 图标滑块 + 值气泡

示例代码

纯值气泡（无自定义内容）

示例代码

通过 template[slot="custom-thumb"]（或普通 [slot="custom-thumb"] 元素）定制滑块内容（图标/文字），内容会克隆到每个可见滑块；show-tooltip 在滑块上方显示当前值气泡，二者可共存。范围模式下模板会克隆到 min/max 两个滑块。

反向

reverse 反向（min 在右）

示例代码

reverse 反转数值方向，最小值在右端；填充区、刻度与自定义滑块位置随之镜像。

事件

实时值与变化事件

示例代码

范围模式事件（detail.value 为数组）

示例代码

拖动过程派发 oas-input，松手派发 oas-change：单值模式 detail.value 为数值，范围模式为 [lo, hi] 数组：

API

属性

属性	说明	类型	默认值
disabled	禁用	boolean	—
marks	刻度：JSON 对象 {"0":"0°C"}（值→标签）或 JSON 数组 [0,26,60]（也可为 {"value":26,"label":"26°C"}）；刻度点与标签显示在轨道下方，值经过处高亮；reverse 下位置镜像	string | Record<string, string | number> | number[]	—
max	范围	string	100
min	范围	string	0
range	范围模式：双滑块区间选择，value 为 JSON 数组 [lo, hi] 或逗号分隔字符串 "lo,hi"；拖动态互相钳制（lo ≤ hi），事件 detail.value 为数组	boolean	—
reverse	方向反转：最小值在右端（轨道 dir="rtl"），填充区/刻度/自定义滑块位置镜像	boolean	—
show-input	右侧显示数值输入框，与滑块双向同步：拖动实时更新输入框；输入数字防抖 300ms 后生效并夹取到 min/max，Enter/失焦立即提交；范围模式显示 min/max 两个输入框（min 超过 max 时推着 max 移动）	boolean	—
show-tooltip	滑块上方显示当前值气泡（拖动中临时显示，与 custom-thumb 共存）	boolean	—
step	步长	string	1
value	当前值（受控）：单值为数值字符串；range 模式为 JSON 数组或逗号分隔字符串	string	—

事件

事件	说明
oas-change	松手确定，detail: { value }（单值数字；range 模式为 [lo, hi] 数组）
oas-input	拖动中/输入防抖提交，detail: { value }（单值数字；range 模式为 [lo, hi] 数组）

插槽

名称	说明
template[slot="custom-thumb"]	自定义滑块内容（图标/文字）：template[slot="custom-thumb"]（静态模板，克隆到每个可见滑块，范围模式两个滑块都会克隆）或普通 [slot="custom-thumb"] 元素