Slider
滑动输入条

滑动型输入器,展示当前值和可选范围。
使用import{ Slider }from"antd";

何时使用

当用户需要在数值区间/自定义区间内进行选择时,可为连续或离散值。

代码演示

Disabled:

基本滑动条。当 rangetrue 时,渲染为双滑块。当 disabledtrue 时,滑块处于不可用状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

滑块左右可以设置图标来表达业务含义。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。在 mouseup 或者 keyup 时,会触发 onChangeComplete 事件,并把当前值作为参数传入。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
0°C26°C37°C100°C

垂直方向的 Slider。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Reversed:

设置 reverse 可以将滑动条置反。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

范围多个点组合。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

数字输入框 组件保持同步。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

使用 tooltip.formatter 可以格式化 Tooltip 的内容,设置 tooltip.formatter={null},则隐藏 Tooltip

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

included=true

0°C26°C37°C100°C
0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C37°C100°C

step=null

0°C26°C37°C100°C

使用 marks 属性标注分段式滑块,使用 value / defaultValue 指定滑块位置。当 included=false 时,表明不同标记间为并列关系。当 step=null 时,Slider 的可选值仅有 marks 标出来的部分。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

tooltip.opentrue 时,将始终显示 ToolTip;反之则始终不显示,即使在拖动、移入时也是如此。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

可以设置 range.draggableTrack,使得范围刻度整体可拖拽。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

点击添加节点,拖出或者按键删除节点。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.20.0

API

通用属性参考:通用属性

参数说明类型默认值版本
autoFocus自动获取焦点booleanfalse
classNames语义化结构 classNameRecord<SemanticDOM, string>-5.10.0
defaultValue设置初始取值。当 range 为 false 时,使用 number,否则用 [number, number]number | [number, number]0 | [0, 0]
disabled值为 true 时,滑块为禁用状态booleanfalse
keyboard支持使用键盘操作 handlerbooleantrue5.2.0+
dots是否只能拖拽到刻度上booleanfalse
includedmarks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列booleantrue
marks刻度标记,key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式object{ number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }
max最大值number100
min最小值number0
range双滑块模式boolean | rangefalse
reverse反向坐标轴booleanfalse
step步长,取值必须大于 0,并且可被 (max - min) 整除。当 marks 不为空对象时,可以设置 step 为 null,此时 Slider 的可选值仅有 marksminmaxnumber | null1
styles语义化结构 stylesRecord<SemanticDOM, React.CSSProperties>-5.10.0
tooltip设置 Tooltip 相关属性tooltip-4.23.0
value设置当前取值。当 range 为 false 时,使用 number,否则用 [number, number]number | [number, number]-
vertical值为 true 时,Slider 为垂直方向booleanfalse
onChangeCompletemouseupkeyup 触发时机一致,把当前值作为参数传入(value) => void-
onChange当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入(value) => void-

range

参数说明类型默认值版本
draggableTrack范围刻度是否可被拖拽booleanfalse
editable启动动态增减节点,不能和 draggableTrack 一同使用booleanfalse5.20.0
minCount配置 editable 时,最小节点数量number05.20.0
maxCount配置 editable 时,最大节点数量number-5.20.0

tooltip

参数说明类型默认值版本
autoAdjustOverflow是否自动调整弹出位置booleantrue5.8.0
open值为 true 时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时boolean-4.23.0
placement设置 Tooltip 展示位置。参考 Tooltipstring-4.23.0
getPopupContainerTooltip 渲染父节点,默认渲染到 body 上(triggerNode) => HTMLElement() => document.body4.23.0
formatterSlider 会把当前值传给 formatter,并在 Tooltip 中显示 formatter 的返回值,若为 null,则隐藏 Tooltipvalue => ReactNode | nullIDENTITY4.23.0

方法

名称描述版本
blur()移除焦点
focus()获取焦点

Semantic DOM

  • root
    5.23.0
    根元素
  • track
    5.10.0
    范围选择下,点和点之间单个选取条
  • tracks
    5.10.0
    范围选择下,整个范围选取条
  • rail
    5.10.0
    背景条元素
  • handle
    5.10.0
    抓取点元素

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
controlSize滑动输入高度number10
dotActiveBorderColor圆点激活态边框颜色string#91caff
dotBorderColor圆点边框颜色string#f0f0f0
dotSize滑块圆点尺寸number8
handleActiveColor滑块激活态边框色string#1677ff
handleActiveOutlineColor滑块激活态外框色stringrgba(22,119,255,0.2)
handleColor滑块颜色string#91caff
handleColorDisabled滑块禁用颜色string#bfbfbf
handleLineWidth滑块边框宽度string | number2
handleLineWidthHover滑块边框宽度(悬浮态)string | number2.5
handleSize滑块尺寸number10
handleSizeHover滑块尺寸(悬浮态)number12
railBg轨道背景色stringrgba(0,0,0,0.04)
railHoverBg轨道背景色(悬浮态)stringrgba(0,0,0,0.06)
railSize轨道高度number4
trackBg轨道已覆盖部分背景色string#91caff
trackBgDisabled轨道禁用态背景色stringrgba(0,0,0,0.04)
trackHoverBg轨道已覆盖部分背景色(悬浮态)string#69b1ff

全局 Token如何定制?