组件 · 表单 · 原生 HTML 与 React
滑块 Range
拖一个数；data-fill 时左边填主色。区间用两个滑块（.xxd-range-pair）。
演示
价格区间
同时生成
<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>export function RangeDemo() {
return <Slider label="同时生成" defaultValue={2} min={1} max={4} className="w-60" />;
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| data-fill | 已填部分用主色 |
| data-ticks + --ticks | 刻度 |
| .xxd-range-pair | 两个把手的区间（最低不会超过最高） |
| 类名 | xxd-range xxd-range-pair xxd-range-value |
键盘与读屏
- 原生 range：← → 微调，Page Up / Down 大步，Home / End 到头
- 当前值要另外用文字显示（aria-valuetext 或旁边的数字），不能只靠滑块位置