一个 React 滑块，采用 Liquid Glass 轨道，支持单值、区间与纵向布局。
Slider 内部渲染 control、track、indicator 和玻璃 thumb；children 不支持，style 会合并到最外层 root。
下面的滑块直接渲染真实组件。标签和数值由外部渲染；拖动滑块、点击轨道或使用方向键都会更新数值。
Slider 不渲染可见标签。请用 aria-labelledby 指向外部可见标签，或传入 aria-label；两者都会从 root 转发给每个 thumb，aria-describedby 也会一并转发。区间滑块可用 getAriaLabel 为每个 thumb 分别命名。
aria-invalid 与 aria-errormessage 会应用到内部的 input[type="range"]，因此表单库提供的校验状态可以到达可聚焦控件。区间滑块中的普通 aria-label 会被所有 thumb 共享；如果每个 thumb 需要不同名称，请传入 getAriaLabel。
传入数组会为每个值渲染一个 thumb。format 使用 Intl.NumberFormatOptions，并应用到 thumb 的可访问数值文本。
orientation="vertical" 会把轨道、指示条和滑块切换为纵向布局：
禁用状态使用原生 disabled，拖动和键盘交互都会停止：
Slider 会把 name 用于表单，并通过隐藏的 input[type="range"] 提交当前值：
min、max 与 step 定义刻度范围。范围滑块中，minStepsBetweenValues 控制两个滑块的最小间距，thumbAlignment 与 thumbCollisionBehavior 控制它们如何贴边以及相遇时的行为。
Step 10 with five steps between values keeps a minimum gap of 50.
Thumbs align to the control edges and swap places when they meet.
每个 thumb 都是 slider，带 aria-valuemin、aria-valuemax、aria-valuenow，并通过 aria-label、aria-labelledby 或 getAriaLabel 获得名称。
方向键按 step 改变数值，Page Up 与 Page Down 使用 largeStep。Home 与 End 会把单值滑块移到边界；在区间滑块中，它们会把当前 thumb 移到相邻 thumb 的边界，最外侧 thumb 仍会到达边界。区间滑块的每个 thumb 都需要不同名称。aria-invalid 与 aria-errormessage 会到达内部的 range 输入。命名示例见可访问性指南。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | readonly number[] | — | 受控值；数组会为每个值渲染一个 thumb。 |
defaultValue | number | readonly number[] | — | 非受控初始值。 |
onValueChange | (value, details) => void | — | 值变化时调用。 |
onValueCommitted | (value, details) => void | — | 值变更提交时调用。 |
name | string | — | 表单提交时使用的字段名。 |
form | string | — | 指定拥有滑块 input 的表单。 |
min | number | 0 | 最小值。 |
max | number | 100 | 最大值。 |
step | number | 1 | 拖动与方向键的步进。 |
largeStep | number | 10 | Page Up / Page Down 与 Shift + 方向键的步进。 |
minStepsBetweenValues | number | 0 | 区间 thumb 之间的最小步进。 |
orientation | "horizontal" | "vertical" | "horizontal" | 布局与键盘方向。 |
format | Intl.NumberFormatOptions | — | 可访问数值文本使用的格式。 |
locale | Intl.LocalesArgument | — | 数值格式化使用的 locale。 |
getAriaLabel | (index: number) => string | — | 为指定索引的 thumb 提供可访问名称，适用于区间滑块。 |
getAriaValueText | (formattedValue, value, index) => string | — | 为每个 thumb 自定义可访问数值文本。 |
aria-label | string | — | 所有 thumb 共享的可访问名称。 |
aria-labelledby | string | — | 指向外部可访问名称的 ID 引用。 |
aria-describedby | string | — | 指向辅助说明的 ID 引用，会随每个 thumb 朗读。 |
aria-invalid | boolean | "grammar" | "spelling" | "true" | "false" | — | 将内部 range input 标记为无效。 |
aria-errormessage | string | — | 与内部 range input 关联的错误信息 id。 |
disabled | boolean | false | 禁用滑块。 |
thumbAlignment | "center" | "edge" | "edge-client-only" | "center" | thumb 与控制边缘的对齐方式。 |
thumbCollisionBehavior | "push" | "swap" | "none" | "push" | 区间 thumb 碰撞时的行为。 |
render | ReactElement | ((props, state) => ReactElement) | — | 替换根元素。 |
ref | Ref<HTMLDivElement> | — | 转发到根元素的 ref。 |
className | string | — | Tailwind 类名，合并到最外层 root。 |
style | CSSProperties | — | 内联样式，合并到与 className 相同的元素。 |
ui | { root?: ClassValue; control?: ClassValue; track?: ClassValue; indicator?: ClassValue; thumb?: ClassValue } | — | 按 data-slot 组织的内部槽位类名。 |
| 属性 | 说明 |
|---|---|
data-dragging | 用户正在拖动 thumb 时存在。 |
data-orientation | 表示方向（horizontal 或 vertical）。 |
data-disabled | 滑块禁用时存在。 |
data-index | 在区间滑块中表示 thumb 索引。 |
data-valid | 滑块包裹在 Field 中且有效时存在。 |
data-invalid | 滑块包裹在 Field 中且无效时存在。 |
data-touched | 滑块包裹在 Field 中并被触碰后存在。 |
data-dirty | 滑块包裹在 Field 中且值变化后存在。 |
data-slot | 标记内部部件（root、control、track、indicator、thumb），用于样式选择。 |
data-focused | 滑块包裹在 Field 中且聚焦时存在。 |
组件使用共享玻璃材质。可以在父级调整 --ui-glass-* token，用 className 控制布局，并通过 ui 按 data-slot 调整内部槽位。组件级数值位于 src/theme/slider.ts。Token 分层与预设见主题指南。