ant-design/components/slider/index.zh-CN.md

category	subtitle	group	title	cover	coverDark	demo
Components	滑动输入条	数据录入	Slider	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XkgXTaudeosAAAAAAAAAAAAADrJ8AQ/original	cols 2

滑动型输入器，展示当前值和可选范围。

何时使用

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

代码演示

基本 带输入框的滑块 带 icon 的滑块 自定义提示 事件 带标签的滑块 垂直 控制 ToolTip 的显示 反向 范围可拖拽 组件 Token

API

参数	说明	类型	默认值	版本
autoFocus	自动获取焦点	boolean	false
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 标出来的部分	number | null	1
tooltip	设置 Tooltip 相关属性	tooltip	-	4.23.0
value	设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]	number | [number, number]	-
vertical	值为 true 时，Slider 为垂直方向	boolean	false
onAfterChange	与 onmouseup 触发时机一致，把当前值作为参数传入	(value) => void	-
onChange	当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入	(value) => void	-
trackStyle	Slider 滑动条轨道样式 (选中范围内)	CSSProperties	-
railStyle	Slider 滑动条轨道样式 (背景)	CSSProperties	-
handleStyle	Slider 滑动滑块样式	CSSProperties	-

range

参数	说明	类型	默认值	版本
draggableTrack	范围刻度是否可被拖拽	boolean	false	4.10.0

tooltip

参数	说明	类型	默认值	版本
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()	获取焦点

Design Token