表单
Slider
在一段范围里选一个值。
示例
default
说明
在一段范围上选一个值。
键盘约定归 Radix——方向键走一步,Page 键跳一大步,Home 和 End 到两端——播报数值的 ARIA 也归它。这里有的是样子,以及标注,而标注恰恰是滑块最常做错的部分:一个只播报“42”的滑块,留给读屏用户的是一个数字,和完全不知道它在量什么。
16px 的滑块周围有一圈看不见的 44px 命中区,因为按设计尺寸做出来的滑块,远低于任何指针目标规范。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| label必填 | string | [string, string] | 给控件命名。必填:一个没有名字的滑块只会播报一个数字,而一个没有名词的数字不是信息。 范围滑块(两个滑块头)需要每个头一个名字——传数组。 | |
| format | (value: number) => string | String | 带单位或货币地渲染这个值,比如 `(n) => n + '%'`。 |
| showValue | boolean | false | 在标签旁边打印当前值。 |
同时接受 ComponentProps<typeof SliderPrimitive.Root> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。
键盘操作
| 按键 | 作用 |
|---|---|
| ←→ | 移动一个步长。 |
| Page UpPage Down | 移动一个更大的步长。 |
| HomeEnd | 跳到最小值或最大值。 |
无障碍
- label 必填。一个只报“42”的滑块,给读屏用户留下一个数字和不知道它在量什么。
- 16px 的滑块外面有一个看不见的 44px 命中区。
- 方向键走一步,Page 键走一大步,Home 和 End 到两端。