# 滑块 Range

分类：表单 · React：Slider

拖一个数；data-fill 时左边填主色。区间用两个滑块（.xxd-range-pair）。

## 示例
```html
<div class="xxd-field" style="width:100%;max-width:260px"><label class="xxd-label">同时生成</label><input type="range" class="xxd-range" data-fill min="1" max="4" value="2" aria-label="同时生成"></div>
<div class="xxd-field" style="width:100%;max-width:260px"><span class="xxd-label">价格区间 <span class="xxd-range-value"></span></span><div class="xxd-range-pair"><input type="range" class="xxd-range" min="0" max="100" value="20" aria-label="最低"><input type="range" class="xxd-range" min="0" max="100" value="70" aria-label="最高"></div></div>
```

## 属性与类名
- `data-fill`：已填部分用主色
- `data-ticks + --ticks`：刻度
- `.xxd-range-pair`：两个把手的区间（最低不会超过最高）
- 类名：`xxd-range` `xxd-range-pair` `xxd-range-value`

## 键盘与读屏
- 原生 range：← → 微调，Page Up / Down 大步，Home / End 到头
- 当前值要另外用文字显示（aria-valuetext 或旁边的数字），不能只靠滑块位置