输入类 · Slider
滑动选择器
滑动选择器,使用拖动交互快速选择数值或数值范围,与 InputNumber 相比更直观
代码演示
如何引入
基本用法
基本滑动条。当
range
为 true
时,支持两侧滑动。当 disabled
为 true
时,滑块处于不可用状态。带输入框的
滑动条的滑块和输入框组件保持同步。
自定义提示
使用
tipFormatter
可以设置 Tooltip 的显示的格式。设置 tipFormatter={null}
,则隐藏 Tooltip。getAriaValueText
用于给滑块的当前值提供一个用户友好的名称,对屏幕阅读器用户很重要。带标签的
使用
marks
属性标注滑块的刻度,使用 value
/ defaultValue
指定滑块位置。分段背景
通过使用
linear-gradient
及 railStyle
,配合 onChange 可以实现动态的分段背景效果。受控组件
滑块位置即
Slider
的值由 value 控制,配合 onChange 使用。垂直
滑块带圆点
API参考
属性 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
aria-label | aria-label属性,用来给当前元素加上的标签描述, 提升可访问性 | string | - | - |
aria-labelledby | aria-labelledby属性,表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性 | string | - | - |
aria-valuetext | aria-valuetext属性,为滑块的当前值提供用户友好的名称。 | string | - | - |
defaultValue | 设置初始取值 | number | number[] | 0 | - |
disabled | 滑块是否禁用 | boolean | false | - |
handleDot | 滑块是否带有圆点 | { color: string, size: string} | { color: string, size: string}[] | - | 2.52.0 |
included | marks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列 | boolean | true | - |
marks | 刻度,key 的类型必须为 number 且取值在闭区间 [min, max] 内 | Record<number, string > | 无 | - |
max | 最大值 | number | 100 | - |
min | 最小值 | number | 0 | - |
railStyle | 滑块轨道的样式 | CSSProperties | - | 0.31.0 |
range | 是否支持两边同时可滑动 | boolean | false | - |
showArrow | tooltip 是否带箭头 | boolean | true | 2.48.0 |
showBoundary | 是否在 hover 时展示最大值最小值 | boolean | false | - |
showMarkLabel | 是否隐藏标签 | boolean | true | 2.48.0 |
step | 步长 | number | 1 | - |
tipFormatter | 设置Tooltip的展示格式,默认显示当前选值 | (value: string | number | boolean | (string | number | boolean)[]) => any | v => v | - |
tooltipOnMark | 滑轨上的 mark 是否带有 tooltip | false | 2.48.0 | |
tooltipVisible | 是否始终显示Tooltip | boolean | 无 | - |
value | 设置当前取值 | number | number[] | - | |
vertical | 是否设置方向为垂直 | boolean | false | - |
verticalReverse | 反转垂直方向,即上大下小 >=1.29.0 | boolean | false | - |
onAfterChange | 值变化后触发,把当前值作为参数传入 | (value: number | number[]) => void | 无 | - |
onChange | 当 Slider 的值发生改变时的回调 | (value: number | number[]) => void | 无 | - |
onMouseUp | 鼠标松开滑块时触发 | (e: React.MouseEvent<HTMLDivElement>) => void | 无 | 2.41.0 |
getAriaValueText | 用于给滑块的当前值提供一个用户友好的名称,对屏幕阅读器用户很重要,参数value为当前滑块的值,index为当前滑块的顺序 | (value: number, index?: number) => string | - | - |
Accessibility
ARIA
- Slider 可聚焦的控制元素 role 为
slider
。 - 元素的
aria-valuenow
属性为当前值的十进制数值。 - 元素的
aria-valuemin
属性为最小允许值的十进制数值。 - 元素的
aria-valuemax
属性为最大允许值的十进制数值。 - 当 Slider 为纵向时,元素的
aria-orientation
属性为 'vertical'。 - 当
aria-valuenow
的值不容易被理解时,支持通过 APIaria-valuetext
传递一个字符串使其更友好。也可以通过 APIgetAriaValueText(value, index)
方法得到aria-valuetext
的值。 - 支持通过 API
aria-label
或者aria-labelledby
确定 slider 的标签。
键盘和焦点
- Slider 的滑块可被获取到焦点,并展示当前滑块的提示信息,且这些信息需要被辅助技术读取到。
- 当用户使用
range
属性时,可以使用Tab
及Shift
+Tab
切换左右两个滑块的焦点。 - 键盘用户可以通过
上箭头
或右箭头
来增加滑块值,下箭头
或左箭头
来减少滑块值。 - 若想要滑块高于步长的变化量时, slider支持 10*step 的变化量:
- Windows 用户:
Page Up
用于增加,Page Down
用于减少; - Mac 用户使用:
Fn
+上箭头
用于增加,Fn
+下箭头
用于按键; - 当用户使用
range
属性时,前一个滑块的Page Up
(Fn
+上箭头
) 键仅支持到与后一个滑块相遇,重合后再对前一个滑块使用 Page Up 键则无响应。后一个滑块同理,相遇后,对Page Down
(Fn
+下箭头
) 键无响应。
- Windows 用户:
- 若想将滑块移动到滑杆的最小值处:
- Windows 用户:
Home
; - Mac 用户:
Fn
+左箭头
; - 当用户使用
range
属性时,后一个滑块的Home
(Fn
+左箭头
) 键仅支持到与前一个滑块相遇,重合后再次使用Home
(Fn
+左箭头
) 键无响应。
- Windows 用户:
- 若想将滑块移动到滑杆的最大值处:
- Windows 用户:
End
; - Mac 用户:
Fn
+右箭头
; - 当用户使用
range
属性时,前一个滑块的End
(Fn
+右箭头
) 键仅支持到与后一个滑块相遇,重合后再次使用End
(Fn
+右箭头
) 键无响应。
- Windows 用户: