Slider 滑块
沿连续范围调整一个或两个数值，并提供键盘精确控制。
使用概览
适合使用
- 音量、透明度或价格范围适合通过相对位置快速调整时。
不建议使用
- 用户必须录入精确数值，或范围跨度过大且缺少刻度语境时。
真实示例
音量范围滑块
在零到一百之间按五点步长调整音量。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站；npm 包也只用于本地候选验证，尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/slider.json基础用法
导入
import { Slider } from "@richardqiu/quartz/slider";JSX
<Slider aria-label="音量" defaultValue={[60]} min={0} max={100} step={5} thumbLabels={["当前音量"]} />状态与控制摘要
默认
键盘焦点可见
已禁用
无效
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | readonly number[] | [0] | 受控提供单值或范围滑块的全部拇指值。 |
组合结构
- 01
Slider
键盘约定
- 方向键按步长移动当前滑块，Home 与 End 分别移动到最小值和最大值。
可访问性契约
- thumbLabels 必须为每个数值提供唯一且非空的可访问名称。
- 无效状态由滑块上的 aria-invalid 暴露；禁用时不会参与表单提交或键盘变更。
- 单值与范围值会按稳定的 name 规则序列化。