# 滑块

单值或范围滑块，支持刻度、步进、竖直、颜色分档，键盘与指针都可操作。只写一个带 data-* 的空元素。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-slider`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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 | 数字输入框的选择器，逗号分隔 | 与输入框双向同步 |

## 方法

- `el.zhSlider.get() / el.zhSlider.set([values])`：读取或设置当前值（数组）

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:slider` | .zh-slider | { type: 'input' \| 'change', values } | 拖动中触发 input，松手或按键后触发 change（冒泡） |

## 无障碍

- 每个滑块都是 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。