Slider

A Slider component for displaying current value and intervals in range.

When To Use

To input a value in a range.

Examples

Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.

Slider with icon

You can add an icon beside the slider to make it meaningful.

Event

The onChange callback function will fire when the user changes the slider's value. The onAfterChange callback function will fire when onmouseup fired.

Vertical

The vertical Slider.

Reverse

Using reverse to render slider reversely.

Slider with InputNumber

Synchronize with InputNumber component.

Customize tooltip

Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.

Graduated slider

Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb. When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.

Draggable track

Make range track draggable when set range.draggableTrack.

API

Common props ref：Common props

Property	Description	Type	Default	Version
autoAdjustOverflow	Whether to automatically adjust the popup position	boolean	true	5.8.0
autoFocus	Whether get focus when component mounted	boolean	false
defaultValue	The default value of slider. When `range` is false, use number, otherwise, use [number, number]	number \| [number, number]	0 \| [0, 0]
disabled	If true, the slider will not be intractable	boolean	false
keyboard	Support using keyboard to move handlers	boolean	true	5.2.0+
dots	Whether the thumb can drag over tick only	boolean	false
included	Make effect when `marks` not null, true means containment and false means coordinative	boolean	true
marks	Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max], each mark can declare its own style	object	{ number: ReactNode } \| { number: { style: CSSProperties, label: ReactNode } }
max	The maximum value the slider can slide to	number	100
min	The minimum value the slider can slide to	number	0
range	Dual thumb mode	boolean	false
reverse	Reverse the component	boolean	false
step	The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null	number \| null	1
tooltip	The tooltip relate props	tooltip	-	4.23.0
value	The value of slider. When `range` is false, use number, otherwise, use [number, number]	number \| [number, number]	-
vertical	If true, the slider will be vertical	boolean	false
onAfterChange	Fire when onmouseup is fired	(value) => void	-
onChange	Callback function that is fired when the user changes the slider's value	(value) => void	-
trackStyle	The style of slider track (the active range)	CSSProperties	-
railStyle	The style of slider rail (the background)	CSSProperties	-
handleStyle	The style of slider handle	CSSProperties	-

range

Property	Description	Type	Default	Version
draggableTrack	Whether range track can be drag	boolean	false	4.10.0

Property	Description	Type	Default	Version
open	If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering	boolean	-	4.23.0
placement	Set Tooltip display position. Ref Tooltip	string	-	4.23.0
getPopupContainer	The DOM container of the Tooltip, the default behavior is to create a div element in body	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider will pass its value to `formatter`, and display its value in Tooltip, and hide Tooltip when return value is null	value => ReactNode \| null	IDENTITY	4.23.0

Methods

Name	Description	Version
blur()	Remove focus
focus()	Get focus

Design Token

Component Token

Global Token

API

Common props ref：Common props

Property	Description	Type	Default	Version
autoAdjustOverflow	Whether to automatically adjust the popup position	boolean	true	5.8.0
autoFocus	Whether get focus when component mounted	boolean	false
defaultValue	The default value of slider. When `range` is false, use number, otherwise, use [number, number]	number \| [number, number]	0 \| [0, 0]
disabled	If true, the slider will not be intractable	boolean	false
keyboard	Support using keyboard to move handlers	boolean	true	5.2.0+
dots	Whether the thumb can drag over tick only	boolean	false
included	Make effect when `marks` not null, true means containment and false means coordinative	boolean	true
marks	Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max], each mark can declare its own style	object	{ number: ReactNode } \| { number: { style: CSSProperties, label: ReactNode } }
max	The maximum value the slider can slide to	number	100
min	The minimum value the slider can slide to	number	0
range	Dual thumb mode	boolean	false
reverse	Reverse the component	boolean	false
step	The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null	number \| null	1
tooltip	The tooltip relate props	tooltip	-	4.23.0
value	The value of slider. When `range` is false, use number, otherwise, use [number, number]	number \| [number, number]	-
vertical	If true, the slider will be vertical	boolean	false
onAfterChange	Fire when onmouseup is fired	(value) => void	-
onChange	Callback function that is fired when the user changes the slider's value	(value) => void	-
trackStyle	The style of slider track (the active range)	CSSProperties	-
railStyle	The style of slider rail (the background)	CSSProperties	-
handleStyle	The style of slider handle	CSSProperties	-

range

Property	Description	Type	Default	Version
draggableTrack	Whether range track can be drag	boolean	false	4.10.0

Property	Description	Type	Default	Version
open	If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering	boolean	-	4.23.0
placement	Set Tooltip display position. Ref Tooltip	string	-	4.23.0
getPopupContainer	The DOM container of the Tooltip, the default behavior is to create a div element in body	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider will pass its value to `formatter`, and display its value in Tooltip, and hide Tooltip when return value is null	value => ReactNode \| null	IDENTITY	4.23.0

Name

Description

Version

blur()

Remove focus

focus()

Get focus

Namu Design

Slider

Namu Design

Slider

When To Use

Examples

API

range

tooltip

Methods

Design Token

Component Token

Global Token

When To Use

Examples

API

range

tooltip

Methods

Design Token

Component Token

Global Token

included=true

included=false

marks & step

step=null

SliderChangelog

SliderChangelog

When To Use

Examples

API

range

tooltip

Methods

Design Token

Component Token

Global Token

When To Use

Examples

API

range

tooltip

Methods

Design Token

Component Token

Global Token

included=true

included=false

marks & step

step=null

Slider

Slider