Ant Design

⌘ K

5.27.4

Slider

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

Importimport { Slider } from "antd";

Sourcecomponents/slider

Docs

Edit this page Changelog

contributors

Select Switch

Ant Design

⌘ K

5.27.4

Slider

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

Importimport { Slider } from "antd";

Sourcecomponents/slider

Docs

Edit this page Changelog

contributors

Select Switch

When To Use

Used to input a value within a specified range.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
autoFocus	Whether to get focus when component is mounted	boolean	false
classNames	Semantic structure className	Record<SemanticDOM, string>	-	5.10.0
defaultValue	The default value of the 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 interactive	boolean	false
keyboard	Support using keyboard to move handlers	boolean	true	5.2.0+
dots	Whether the thumb can only be dragged to tick marks	boolean	false
included	Takes effect when `marks` is not null. True means containment and false means coordinative	boolean	true
marks	Tick marks of Slider. The type of key must be `number`, and must be 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	Enable dual thumb mode for range selection	boolean	false
reverse	Reverse the component	boolean	false
step	The granularity the slider can step through values. Must be greater than 0, and be divisible by (max - min). When `step` is `null` and `marks` exist, valid points will only be marks, `min` and `max`	number \| null	1
styles	Semantic structure style	Record<SemanticDOM, React.CSSProperties>	-	5.10.0
tooltip	The tooltip related 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
onChangeComplete	Fire when `mouseup` or `keyup` is fired	(value) => void	-
onChange	Callback function that is fired when the user changes the slider's value	(value) => void	-

range

Property	Description	Type	Default	Version
draggableTrack	Whether range track can be dragged	boolean	false	-
editable	Dynamic edit nodes. Cannot be used with `draggableTrack`	boolean	false	5.20.0
minCount	The minimum count of nodes	number	0	5.20.0
maxCount	The maximum count of nodes	number	-	5.20.0

Property	Description	Type	Default	Version
autoAdjustOverflow	Whether to automatically adjust the popup position	boolean	true	5.8.0
open	If true, Tooltip will always be visible; if false, it will never be visible, even when 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 the body	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider will pass its value to `formatter`, display its value in Tooltip, and hide the Tooltip when the returned value is null	value => ReactNode \| null	IDENTITY	4.23.0

Methods

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

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
controlSize	Height of slider	number	10
dotActiveBorderColor	Border color of dot when active	string	#91caff
dotBorderColor	Border color of dot	string	#f0f0f0
dotSize	Size of dot	number	8
handleActiveColor	Border color of handle when active	string	#1677ff
handleActiveOutlineColor	Outline color of handle when active	string	rgba(22,119,255,0.2)
handleColor	Color of handle	string	#91caff
handleColorDisabled	Color of handle when disabled	string	#bfbfbf
handleLineWidth	Border width of handle	string \| number	2
handleLineWidthHover	Border width of handle when hover	string \| number	2.5
handleSize	Size of handle	number	10
handleSizeHover	Size of handle when hover	number	12
railBg	Background color of rail	string	rgba(0,0,0,0.04)
railHoverBg	Background color of rail when hover	string	rgba(0,0,0,0.06)
railSize	Height of rail	number	4
trackBg	Background color of track	string	#91caff
trackBgDisabled	Background color of track when disabled	string	rgba(0,0,0,0.04)
trackHoverBg	Background color of track when hover	string	#69b1ff

Global TokenHow to use?

When To Use

Used to input a value within a specified range.

Examples

Basic

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 onChangeComplete callback function will fire when mouseup or keyup fired.

Vertical

The vertical Slider.

Reverse

Using reverse to render slider reversely.

Multiple handles

Multiple handles combination.

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 by setting range.draggableTrack.

Dynamic edit nodes

Click to add a node, drag out or press the key to delete the node.

5.20.0

API

Common props ref：Common props

Property	Description	Type	Default	Version
autoFocus	Whether to get focus when component is mounted	boolean	false
classNames	Semantic structure className	Record<SemanticDOM, string>	-	5.10.0
defaultValue	The default value of the 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 interactive	boolean	false
keyboard	Support using keyboard to move handlers	boolean	true	5.2.0+
dots	Whether the thumb can only be dragged to tick marks	boolean	false
included	Takes effect when `marks` is not null. True means containment and false means coordinative	boolean	true
marks	Tick marks of Slider. The type of key must be `number`, and must be 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	Enable dual thumb mode for range selection	boolean	false
reverse	Reverse the component	boolean	false
step	The granularity the slider can step through values. Must be greater than 0, and be divisible by (max - min). When `step` is `null` and `marks` exist, valid points will only be marks, `min` and `max`	number \| null	1
styles	Semantic structure style	Record<SemanticDOM, React.CSSProperties>	-	5.10.0
tooltip	The tooltip related 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
onChangeComplete	Fire when `mouseup` or `keyup` is fired	(value) => void	-
onChange	Callback function that is fired when the user changes the slider's value	(value) => void	-

range

Property	Description	Type	Default	Version
draggableTrack	Whether range track can be dragged	boolean	false	-
editable	Dynamic edit nodes. Cannot be used with `draggableTrack`	boolean	false	5.20.0
minCount	The minimum count of nodes	number	0	5.20.0
maxCount	The maximum count of nodes	number	-	5.20.0

Property	Description	Type	Default	Version
autoAdjustOverflow	Whether to automatically adjust the popup position	boolean	true	5.8.0
open	If true, Tooltip will always be visible; if false, it will never be visible, even when 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 the body	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider will pass its value to `formatter`, display its value in Tooltip, and hide the Tooltip when the returned value is null	value => ReactNode \| null	IDENTITY	4.23.0

Methods

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

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
controlSize	Height of slider	number	10
dotActiveBorderColor	Border color of dot when active	string	#91caff
dotBorderColor	Border color of dot	string	#f0f0f0
dotSize	Size of dot	number	8
handleActiveColor	Border color of handle when active	string	#1677ff
handleActiveOutlineColor	Outline color of handle when active	string	rgba(22,119,255,0.2)
handleColor	Color of handle	string	#91caff
handleColorDisabled	Color of handle when disabled	string	#bfbfbf
handleLineWidth	Border width of handle	string \| number	2
handleLineWidthHover	Border width of handle when hover	string \| number	2.5
handleSize	Size of handle	number	10
handleSizeHover	Size of handle when hover	number	12
railBg	Background color of rail	string	rgba(0,0,0,0.04)
railHoverBg	Background color of rail when hover	string	rgba(0,0,0,0.06)
railSize	Height of rail	number	4
trackBg	Background color of track	string	#91caff
trackBgDisabled	Background color of track when disabled	string	rgba(0,0,0,0.04)
trackHoverBg	Background color of track when hover	string	#69b1ff

Global TokenHow to use?

Basic

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 onChangeComplete callback function will fire when mouseup or keyup fired.

Vertical

The vertical Slider.

Reverse

Using reverse to render slider reversely.

Multiple handles

Multiple handles combination.

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 by setting range.draggableTrack.

Dynamic edit nodes

Click to add a node, drag out or press the key to delete the node.

5.20.0

Disabled:

0°C26°C37°C100°C

Reversed:

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

root
5.23.0
Root element
track
5.10.0
The selection bar between points and points under the range selection
tracks
5.10.0
The entire range selection bar under the range selection
rail
5.10.0
Background rail element
handle
5.10.0
Grab handle element

Slider

Slider

When To Use

Examples

API

range

tooltip

Methods

Semantic DOM

Design Token

When To Use

Examples

API

range

tooltip

Methods

Semantic DOM

Design Token

included=true

included=false

marks & step

step=null

root

track

tracks

rail

handle