Slider滑动输入条
Slider
滑动输入条
滑动型输入器，展示当前值和可选范围。
使用import { Slider } from "antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。
滑块左右可以设置图标来表达业务含义。
当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 mouseup 或者 keyup 时，会触发 onChangeComplete 事件，并把当前值作为参数传入。
垂直方向的 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、min 和 max | number | null | 1 | |
| styles | 语义化结构 styles | 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 | |
| onChangeComplete | 与 mouseup 和 keyup 触发时机一致，把当前值作为参数传入 | (value) => void | - | |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
| editable | 启动动态增减节点，不能和 draggableTrack 一同使用 | boolean | false | 5.20.0 |
| minCount | 配置 editable 时，最小节点数量 | number | 0 | 5.20.0 |
| maxCount | 配置 editable 时，最大节点数量 | number | - | 5.20.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 |
| handleActiveOutlineColor | 滑块激活态外框色 | string | rgba(22,119,255,0.2) |
| handleColor | 滑块颜色 | string | #91caff |
| handleColorDisabled | 滑块禁用颜色 | string | #bfbfbf |
| handleLineWidth | 滑块边框宽度 | string | number | 2 |
| handleLineWidthHover | 滑块边框宽度（悬浮态） | string | number | 2.5 |
| 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 |
