滑动输入条 Slider - Ant Design

何时使用

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

代码演示

Disabled:

基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。

带 icon 的滑块

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

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

0°C26°C37°C100°C

垂直方向的 Slider。

Reversed:

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

范围多个点组合。

带输入框的滑块

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

自定义提示

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

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 标出来的部分。

范围可拖拽

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

动态增减节点

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

5.20.0

API

通用属性参考：通用属性

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

range

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

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

方法

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

Semantic DOM

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

主题变量（Design Token）

组件 Token如何定制？

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

全局 Token如何定制？