- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
滑动型输入器，展示当前值和可选范围。
当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。
滑块左右可以设置图标来表达业务含义。
当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。
垂直方向的 Slider。
设置 reverse 可以将滑动条置反。
范围多个点组合。
和 数字输入框 组件保持同步。
使用 tooltip.formatter 可以格式化 Tooltip 的内容，设置 tooltip.formatter={null}，则隐藏 Tooltip。
使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。
当 tooltip.open 为 true 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
可以设置 range.draggableTrack，使得范围刻度整体可拖拽。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoFocus | 自动获取焦点 | boolean | false | |
| classNames | 语义化结构 className | Record<SemanticDOM, string> | - | 5.10.0 |
| defaultValue | 设置初始取值。当 range 为 false 时，使用 number，否则用 [number, number] | number | [number, number] | 0 | [0, 0] | |
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
| dots | 是否只能拖拽到刻度上 | boolean | false | |
| included | marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | |
| marks | 刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
| max | 最大值 | number | 100 | |
| min | 最小值 | number | 0 | |
| range | 双滑块模式 | boolean | range | false | |
| reverse | 反向坐标轴 | boolean | false | |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number | null | 1 | |
| styles | 语义化结构 className | Record<SemanticDOM, React.CSSProperties> | - | 5.10.0 |
| tooltip | 设置 Tooltip 相关属性 | tooltip | - | 4.23.0 |
| value | 设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number] | number | [number, number] | - | |
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
| onAfterChange | 与 onmouseup 触发时机一致，把当前值作为参数传入 | (value) => void | - | |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - |
styles 和 classNames 属性| 名称 | 说明 | 版本 |
|---|---|---|
| track | 范围选择下，点和点之间单个选取条 | 5.10.0 |
| tracks | 范围选择下，整个范围选取条 | 5.10.0 |
| rail | 背景条 | 5.10.0 |
| handle | 抓取点 | 5.10.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | 4.10.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
| placement | 设置 Tooltip 展示位置。参考 Tooltip | string | - | 4.23.0 |
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
| formatter | Slider 会把当前值传给 formatter，并在 Tooltip 中显示 formatter 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode | null | IDENTITY | 4.23.0 |
| 名称 | 描述 | 版本 |
|---|---|---|
| blur() | 移除焦点 | |
| focus() | 获取焦点 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| controlSize | 滑动输入高度 | number | 10 |
| dotActiveBorderColor | string | #91caff | |
| dotBorderColor | string | #f0f0f0 | |
| dotSize | 滑块圆点尺寸 | number | 8 |
| handleActiveColor | string | #1677ff | |
| handleColor | string | #91caff | |
| handleLineWidth | 滑块边框宽度 | number | 2 |
| handleLineWidthHover | 滑块边框宽度（悬浮态） | number | 4 |
| handleSize | 滑块尺寸 | number | 10 |
| handleSizeHover | 滑块尺寸（悬浮态） | number | 12 |
| railBg | string | rgba(0, 0, 0, 0.04) | |
| railHoverBg | string | rgba(0, 0, 0, 0.06) | |
| railSize | 轨道高度 | number | 4 |
| trackBg | string | #91caff | |
| trackBgDisabled | string | rgba(0, 0, 0, 0.04) | |
| trackHoverBg | string | #69b1ff |