输入类 · Slider
滑动选择器
滑动选择器,使用拖动交互快速选择数值或数值范围,与 InputNumber 相比更直观

代码演示

如何引入

基本用法

基本滑动条。当 rangetrue 时,支持两侧滑动。当 disabledtrue 时,滑块处于不可用状态。

带输入框的

滑动条的滑块和输入框组件保持同步。

自定义提示

使用 tipFormatter 可以设置 Tooltip 的显示的格式。设置 tipFormatter={null},则隐藏 Tooltip。getAriaValueText用于给滑块的当前值提供一个用户友好的名称,对屏幕阅读器用户很重要。

带标签的

使用 marks 属性标注滑块的刻度,使用 value / defaultValue 指定滑块位置。

分段背景

通过使用 linear-gradientrailStyle ,配合 onChange 可以实现动态的分段背景效果。

受控组件

滑块位置即 Slider 的值由 value 控制,配合 onChange 使用。

垂直

滑块带圆点

API参考

属性说明类型默认值版本
aria-labelaria-label属性,用来给当前元素加上的标签描述, 提升可访问性string--
aria-labelledbyaria-labelledby属性,表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系, 提升可访问性string--
aria-valuetextaria-valuetext属性,为滑块的当前值提供用户友好的名称。string--
defaultValue设置初始取值number | number[]0-
disabled滑块是否禁用booleanfalse-
handleDot滑块是否带有圆点{ color: string, size: string} |
{ color: string, size: string}[]
-2.52.0
includedmarks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列booleantrue-
marks刻度,key 的类型必须为 number 且取值在闭区间 [min, max] 内Record<number, string >-
max最大值number100-
min最小值number0-
railStyle滑块轨道的样式CSSProperties-0.31.0
range是否支持两边同时可滑动booleanfalse-
showArrowtooltip 是否带箭头booleantrue2.48.0
showBoundary是否在 hover 时展示最大值最小值booleanfalse-
showMarkLabel是否隐藏标签booleantrue2.48.0
step步长number1-
tipFormatter设置Tooltip的展示格式,默认显示当前选值(value: string | number | boolean | (string | number | boolean)[]) => anyv => v-
tooltipOnMark滑轨上的 mark 是否带有 tooltipfalse2.48.0
tooltipVisible是否始终显示Tooltipboolean-
value设置当前取值number | number[]-
vertical是否设置方向为垂直booleanfalse-
verticalReverse反转垂直方向,即上大下小 >=1.29.0booleanfalse-
onAfterChange值变化后触发,把当前值作为参数传入(value: number | number[]) => void-
onChange当 Slider 的值发生改变时的回调(value: number | number[]) => void-
onMouseUp鼠标松开滑块时触发(e: React.MouseEvent<HTMLDivElement>) => void2.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 的值不容易被理解时,支持通过 API aria-valuetext 传递一个字符串使其更友好。也可以通过 API getAriaValueText(value, index) 方法得到 aria-valuetext 的值。
  • 支持通过 API aria-label 或者 aria-labelledby 确定 slider 的标签。

键盘和焦点

  • Slider 的滑块可被获取到焦点,并展示当前滑块的提示信息,且这些信息需要被辅助技术读取到。
  • 当用户使用 range 属性时,可以使用 TabShift + Tab 切换左右两个滑块的焦点。
  • 键盘用户可以通过 上箭头右箭头 来增加滑块值,下箭头左箭头 来减少滑块值。
  • 若想要滑块高于步长的变化量时, slider支持 10*step 的变化量:
    • Windows 用户: Page Up 用于增加,Page Down 用于减少;
    • Mac 用户使用: Fn + 上箭头 用于增加,Fn + 下箭头 用于按键;
    • 当用户使用 range 属性时,前一个滑块的 Page Up(Fn + 上箭头) 键仅支持到与后一个滑块相遇,重合后再对前一个滑块使用 Page Up 键则无响应。后一个滑块同理,相遇后,对Page Down(Fn + 下箭头) 键无响应。
  • 若想将滑块移动到滑杆的最小值处:
    • Windows 用户: Home
    • Mac 用户: Fn + 左箭头
    • 当用户使用 range 属性时,后一个滑块的 Home(Fn + 左箭头) 键仅支持到与前一个滑块相遇,重合后再次使用 Home(Fn + 左箭头) 键无响应。
  • 若想将滑块移动到滑杆的最大值处:
    • Windows 用户:End
    • Mac 用户:Fn + 右箭头
    • 当用户使用 range 属性时,前一个滑块的 End(Fn + 右箭头) 键仅支持到与后一个滑块相遇,重合后再次使用 End(Fn + 右箭头) 键无响应。

设计变量