滑块
单值或范围滑块，支持刻度、步进、竖直、颜色分档，键盘与指针都可操作。只写一个带 data-* 的空元素。
带行为 核心包 1 个事件 1 个方法
示例
代码
<div class="zh-slider" id="vol" data-value="40" data-label="音量" data-fmt="{v}%"></div>
<div class="zh-slider" data-value="50" data-step="25" data-label="清晰度" data-marks="0:流畅,25:标清,50:高清,75:超清,100:蓝光"></div>
<div class="zh-slider" data-value="800,3200" data-min="0" data-max="5000" data-step="50" data-gap="200" data-label="价格" data-fmt="¥{v}"></div>
<div class="zh-slider" data-value="78" data-label="存储用量" data-fmt="{v}%" data-colors="0:primary,70:warning,90:danger" data-status="0:正常,70:偏高,90:危险"></div>
<script>
document.getElementById('vol').addEventListener('zh:slider', function (e) {
if (e.detail.type === 'change') console.log(e.detail.values[0]);
});
</script>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-value | .zh-slider | 数字，或「下限,上限」 | 写两个值即为范围滑块，如 800,3200 |
data-min / data-max / data-step | .zh-slider | 数字，默认 0 / 100 / 1 | 范围与步长，值会吸附到步长上 |
data-label | .zh-slider | 字符串 | 无障碍名称；范围滑块会自动加「最小值 / 最大值」 |
data-fmt | .zh-slider | 含 {v} 的模板，如 {v}% | 显示与朗读时的数值格式 |
data-marks | .zh-slider | 值:文字 逗号分隔，如 0:低,50:中,100:高 | 刻度；点击刻度可直接跳到该值 |
data-colors / data-status | .zh-slider | 值:颜色 或 值:文字 逗号分隔 | 按数值分档变色（primary、warning、danger 等）或附加状态文字 |
data-gap | .zh-slider | 数字 | 范围滑块两个滑块之间的最小间隔 |
data-vertical / data-disabled | .zh-slider | 布尔属性 | 竖直 / 禁用；竖直滑块用 --zh-slider-len 设定长度 |
data-out | .zh-slider | <output> 的选择器 | 把当前值写到这个元素里 |
data-link | .zh-slider | 数字输入框的选择器，逗号分隔 | 与输入框双向同步 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:slider | .zh-slider | { type: 'input' | 'change', values } | 拖动中触发 input，松手或按键后触发 change（冒泡） |
方法
el.zhSlider.get() / el.zhSlider.set([values])：读取或设置当前值（数组）
样式类
zh-slider
无障碍
- 每个滑块都是 role="slider"，带 aria-valuemin / aria-valuemax / aria-valuenow / aria-valuetext
- ← → ↑ ↓ 加减一个步长，PageUp / PageDown 加减约十分之一范围，Home / End 到两端
- RTL 页面中水平滑块的方向会自动反过来
- 颜色分档同时给出状态文字，不只靠颜色
常见问题
滑块是什么？
单值或范围滑块，支持刻度、步进、竖直、颜色分档，键盘与指针都可操作。只写一个带 data-* 的空元素。
怎么使用滑块？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。
滑块有哪些事件？
zh:slider（拖动中触发 input，松手或按键后触发 change（冒泡））。
滑块有哪些方法？
el.zhSlider.get() / el.zhSlider.set([values])：读取或设置当前值（数组）。
滑块支持键盘和读屏吗？
每个滑块都是 role="slider"，带 aria-valuemin / aria-valuemax / aria-valuenow / aria-valuetext；← → ↑ ↓ 加减一个步长，PageUp / PageDown 加减约十分之一范围，Home / End 到两端；RTL 页面中水平滑块的方向会自动反过来。
滑块需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。