Slider
滑动输入条

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

何时使用

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

代码演示

Disabled:

基本

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

带 icon 的滑块

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

事件

当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。

0°C26°C37°C100°C

垂直

垂直方向的 Slider。

Reversed:

反向

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

带输入框的滑块

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

自定义提示

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

included=true

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，使得范围刻度整体可拖拽。

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

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

Design Token

组件 Token

全局 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

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

获取焦点

Namu Design

Slider
滑动输入条

Namu Design

Slider
滑动输入条

何时使用

代码演示

included=true

included=false

marks & step

step=null

API

range

tooltip

方法

Design Token

组件 Token

全局 Token

何时使用

代码演示

included=true

included=false

marks & step

step=null

API

range

tooltip

方法

Design Token

组件 Token

全局 Token

Slider滑动输入条更新日志

Slider滑动输入条更新日志

何时使用

代码演示

included=true

included=false

marks & step

step=null

API

range

tooltip

方法

Design Token

组件 Token

全局 Token

何时使用

代码演示

included=true

included=false

marks & step

step=null

API

range

tooltip

方法

Design Token

组件 Token

全局 Token

Slider
滑动输入条

Slider
滑动输入条