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

代码演示

如何引入

基本用法

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

带输入框的

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

自定义提示

使用 tipFormatter 可以设置 Tooltip 的显示的格式。设置 tipFormatter={null},则隐藏 Tooltip。

带标签的

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

分段背景

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

受控组件

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

垂直

API参考

属性说明类型默认值版本
defaultValue设置初始取值number | number[]0-
disabled滑块是否禁用booleanfalse-
includedmarks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列booleantrue-
marks刻度,key 的类型必须为 number 且取值在闭区间 [min, max] 内Record<number, string >-
max最大值number100-
min最小值number0-
railStyle滑块轨道的样式CSSProperties-0.31.0
range是否支持两边同时可滑动booleanfalse-
showBoundary是否在 hover 时展示最大值最小值booleanfalse-
step步长number1-
tipFormatter设置Tooltip的展示格式,默认显示当前选值(value: string | number | boolean | (string | number | boolean)[]) => anyv => v-
tooltipVisible是否始终显示Tooltipboolean-
value设置当前取值number | number[]-
vertical是否设置方向为垂直booleanfalse-
verticalReverse反转垂直方向,即上大下小 >=1.29.0booleanfalse-
onAfterChangeonmouseup 触发时机一致,把当前值作为参数传入(value: number | number[]) => void-
onChange当 Slider 的值发生改变时的回调(value: number | number[]) => void-

Accessibility

ARIA

  • Slider 可聚焦的控制元素 role 为 slider
  • 元素的 aria-valuenow 属性为当前值的十进制数值。
  • 元素的 aria-valuemin 属性为最小允许值的十进制数值。
  • 元素的 aria-valuemax 属性为最大允许值的十进制数值。
  • 当 Slider 为纵向时,元素的 aria-orientation 属性为 'vertical'。
  • aria-valuenow 的值不容易被理解时,支持通过 API aria-valuetext 传递一个字符串使其更友好。也可以通过 API geAriaValueText(value) 方法得到 aria-valuetext 的值。
  • 支持通过 API aria-label 或者 aria-labelledby 确定 slider 的标签。

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED