Slider 滑动输入控件
用于展示当前值和可选范围的滑动输入控件。
获取组件
import { Slider, RangeSlider } from 'rsuite';Slider滑动输入控件，用于选择单个值。RangeSlider滑动范围输入控件，用于选择一个区间。
演示
默认
显示进度条
通过 progress 属性显示当前滑动的进度条。
显示刻度
通过 graduated 属性显示刻度。
带标记的刻度
通过 marks 属性自定义刻度标记。
尺寸
支持多种尺寸，可通过 size 属性设置。
垂直滑动
通过 vertical 属性设置为垂直方向。
禁用与只读
通过 disabled 或 readOnly 属性设置禁用或只读状态。
受控的值
受控用法，通过 value 属性和回调函数控制滑块的值。
约束
通过 constraint 属性自定义数值区间的限制。
自定义手柄
通过 handleTitle 和 handleClassName 属性自定义手柄内容和样式。
保持工具提示打开
通过 keepTooltipOpen 属性让 Tooltip 始终可见。
无障碍设计
WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider
键盘交互
- ArrowRight，ArrowUp: 将 Slider 的值增加一级。
- ArrowLeft，ArrowDown: 将 Slider 的值减小一级。
- Home: 将 Slider 设置为其范围内的第一个允许值。
- End: 将 Slider 设置为其范围内的最后一个允许值。
WAI-ARIA Roles, States, and Properties
- 用作可聚焦 Slider 元素具有
sliderrole。 - Slider 元素的
aria-valuenow属性设置为代当前值的十进制值。 - 如果
aria-valuenow的值对用户不友好，则将aria-valuetext属性设置为字符串，以使滑块值易于理解。 您可以使用getAriaValueText或aria-valuetext属性更改名称。
<Slider getAriaValueText={value => `${value}MB`} />- Slider 元素的
aria-valuemin属性设置为十进制值，代表最小允许值。 - Slider 元素的
aria-valuemax属性设置为十进制值，代表最大允许值。 - 如果 Slider 是垂直方向的，则将其
aria-orientation设置为vertical。 滑块的aria-orientation的默认值为horizontal。 - 如果 Slider 具有可见标签，则在元素上添加
aria-labelledby引用。 否则，Slider 元素具有aria-label提供的标签。
<>
<label id="slider-label">内存大小</label>
<Slider aria-labelledby="slider-label" />
</>Props
<Slider>
| 属性名称 | 类型(默认值) |
描述 | 版本 |
|---|---|---|---|
| barClassName | string | 应用于滑动条 DOM 节点的 css class | |
| defaultValue | number | 默认值（非受控） | |
| disabled | boolean | 是否禁用 | |
| getAriaValueText | (value: number) => string; | 提供 Slider 的当前值的用户友好名称 | |
| graduated | boolean | 显示刻度 | |
| handleClassName | string | 应用于手柄 DOM 节点的 css class | |
| handleStyle | CSSProperties | 附加手柄样式 | |
| handleTitle | ReactNode | 自定义手柄内显示内容 | |
| keepTooltipOpen | boolean | Tooltip 始终保持可见 |
|
| marks | Mark[] | 滑动条上的自定义标记 |  |
| max | number(100) |
滑动范围的最大值 | |
| min | number(0) |
滑动范围的最小值 | |
| onChange | (value: number, event) => void | 数据发生改变的回调函数 | |
| onChangeCommitted | (value: number, event) => void; | 在 mouseup 事件触发后，同时数据发生改变的回调 | |
| progress | boolean | 显示滑动的进度条 | |
| renderMark | (mark: number) => ReactNode | 自定义渲染标尺上的标签 | |
| renderTooltip | (value: number ) => ReactNode | 自定义渲染 Tooltip 的内容 | |
| size | Size | ('sm') |
指定滑动条的尺寸 | |
| step | number(1) |
滑动一步的值 | |
| tooltip | boolean(true) |
滑动时候，是否显示 tooltip | |
| value | number | 当前值（受控） | |
| vertical | boolean | 垂直滑动 |
<RangeSlider>
| 属性名称 | 类型(默认值) |
描述 | 版本 |
|---|---|---|---|
| barClassName | string | 应用于滑动条 DOM 节点的 css class | |
| constraint | (value: [number, number]) => boolean |
在 onChange 触发之前对下一个值进行检查, 返回 false 则不触发 onChange |
|
| defaultValue | [number,number] | 默认值（非受控） | |
| disabled | boolean | 是否禁用 | |
| getAriaValueText | (value: number,eventKey:'start'|'end') => string; | 提供 Slider 的当前值的用户友好名称 | |
| graduated | boolean | 显示刻度 | |
| handleClassName | string | 应用于手柄 DOM 节点的 css class | |
| handleStyle | CSSProperties | 附加手柄样式 | |
| handleTitle | ReactNode | 自定义手柄内显示内容 | |
| keepTooltipOpen | boolean | Tooltip 始终保持可见 |
|
| marks | Mark[] | 滑动条上的自定义标记 | |
| max | number(100) |
滑动范围的最大值 | |
| min | number(0) |
滑动范围的最小值 | |
| onChange | (value: [number,number], event) => void | 数据发生改变的回调函数 | |
| onChangeCommitted | (value: [number,number], event) => void; | 在 mouseup 事件触发后，同时数据发生改变的回调 | |
| progress | boolean | 显示滑动的进度条 | |
| renderMark | (mark: number) => ReactNode | 自定义渲染标尺上的标签 | |
| renderTooltip | (value: number ) => ReactNode | 自定义渲染 Tooltip 的内容 | |
| size | Size | ('sm') |
指定滑动条的尺寸 | |
| step | number(1) |
滑动一步的值 | |
| tooltip | boolean(true) |
滑动时候，是否显示 tooltip | |
| value | [number,number] | 当前值（受控） | |
| vertical | boolean | 垂直滑动 |
Size
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
Mark
interface Mark {
value: number;
label?: React.ReactNode;
}