Slider
在连续或分段范围内选值。中文惯用名：滑动条。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.slider |
| 名称 | Slider |
| 二级分类 | 数据录入（data-entry） |
| 用途 | 在连续或分段范围内选值 |
| 描述 | 中文惯用名：滑动条。 |
预览
静态结构：Slider 为 Base UI 单值滑杆（data-slot="slider"）：SliderControl（data-slot="slider-control"）内 Track（data-slot="slider-track"）+ Indicator（data-slot="slider-indicator"，已选区间填充）+ 单个 Thumb（data-slot="slider-thumb"，可拖拽、支持键盘方向键微调）。min / max / step 决定轨道范围与步进；value 非 number 时回退为 min。Form 内声明非空 name 时经 FieldShell 包裹（label + 校验错误行）。
DSL 结构
{
"type": "Slider",
"props": {
"name": "threshold",
"label": "告警阈值",
"value": 40,
"min": 0,
"max": 100,
"step": 5
}
}何时用
何时使用
- 在一个连续区间内取值的调参场景：阈值、音量、透明度、缩放比例。
- 用户更关注「大致比例」而非精确数值，拖动即可看到结果变化。
- 需要限制取值范围的数值（min / max / step 共同约束）。
何时不用
- 需要精确录入具体数值（金额、数量、编号）：使用 NumberInput；Slider 依赖指针精度，微调困难。
- 区间选择（开始 - 结束两个端点）：当前实现为单值滑杆，区间用两个 NumberInput 字段或等待区间组件。
- 离散枚举选择：使用 RadioGroup / Select。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 默认（0-100） | 轨道 + 已选填充 + 可拖拽滑块 | 无特殊范围的百分比类调参 |
| min / max 自定义范围 | 轨道按范围映射，拇指位置随之变化 | 非 0-100 的取值区间（如温度、额度） |
| step 离散步进 | 拖动吸附到 step 的整数倍 | 只允许特定档位取值（如 5 的倍数） |
| Form 表单项 | FieldShell：label + 滑杆 + 校验错误行 | 表单内数值字段（声明 name 自动注册） |
| disabled 禁用 | 滑杆半透明不可拖动 | 只读回显、联动未就绪 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
name | string | — | 字段名；在 Form 内声明即自动成为表单项 |
label | string | — | 表单项标签（FieldShell 呈现） |
rules | FieldRule[] | — | 校验规则 |
value | number | — | 受控值（独立渲染时生效，非 number 时回退为 min）；Form 内作为字段初始值（优先于 Form initialValues） |
min | number | 0 | 最小值 |
max | number | 100 | 最大值 |
step | number | 1 | 步长（拖动吸附与键盘微调的步距） |
disabled | boolean | false | 禁用拖动 |
onChange | (value: number) => void | — | 拖动变化事件，传出 number（Renderer 绑定 events.onChange；DSL 语义值，拖动过程高频触发） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式（Form 内为 form-item 容器，独立渲染时为滑杆本身） |
使用规范
- 拖动过程 onChange 高频触发：联动重活（接口保存、大计算）必须自行节流或改为拖拽结束后提交。
- 必须同时给出当前值的可读回显（如旁侧文本或数字输入），滑杆本身无法表达精确数值。
- min / max / step 与业务约束一致；step 过大时用户无法到达期望值，过小则难以精确停止。
- 精确录入需求交给 NumberInput，Slider 适合「大致比例」；两者可组合（滑杆 + 数字框双向联动）。
- Form 内声明非空 name 才注册字段；未声明 name 时为独立受控滑杆。
正例
- ✓ 告警阈值：min={0} max={100} step={5}，旁侧文本实时显示「当前值：40」，确认后再保存。
- ✓ 画布缩放：Slider 与 NumberInput 双向联动，拖动看效果、输入定精确值。
- ✓ Form 内「评分权重」：name + label，rules 限制必填，值以 number 提交。
反例
- ✕ 用 Slider 录入金额、数量等必须精确的字段（应使用 NumberInput）。
- ✕ 在 onChange 中直接发起保存请求，拖动一次打出数十个请求。
- ✕ 不给当前值回显，用户无法知道拖到了具体哪个数值。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。