跳到正文
GitHub

表单

Slider

在一段范围里选一个值。

示例

default

Quality80%
Minimum price$20 – $70

说明

在一段范围上选一个值。

键盘约定归 Radix——方向键走一步,Page 键跳一大步,Home 和 End 到两端——播报数值的 ARIA 也归它。这里有的是样子,以及标注,而标注恰恰是滑块最常做错的部分:一个只播报“42”的滑块,留给读屏用户的是一个数字,和完全不知道它在量什么。

16px 的滑块周围有一圈看不见的 44px 命中区,因为按设计尺寸做出来的滑块,远低于任何指针目标规范。

属性

Slider props
属性类型默认值说明
label必填string | [string, string]给控件命名。必填:一个没有名字的滑块只会播报一个数字,而一个没有名词的数字不是信息。 范围滑块(两个滑块头)需要每个头一个名字——传数组。
format(value: number) => stringString带单位或货币地渲染这个值,比如 `(n) => n + '%'`。
showValuebooleanfalse在标签旁边打印当前值。

同时接受 ComponentProps<typeof SliderPrimitive.Root> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

键盘操作

Slider keyboard interactions
按键作用
移动一个步长。
Page UpPage Down移动一个更大的步长。
HomeEnd跳到最小值或最大值。

无障碍

  • label 必填。一个只报“42”的滑块,给读屏用户留下一个数字和不知道它在量什么。
  • 16px 的滑块外面有一个看不见的 44px 命中区。
  • 方向键走一步,Page 键走一大步,Home 和 End 到两端。