Ant Design

⌘ K

5.21.3

Slider

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

가져오기import{ Slider }from"antd";

소스components/slider

문서

이 페이지 수정 변경 로그

Ant Design

⌘ K

5.21.3

Slider

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

가져오기import{ Slider }from"antd";

소스components/slider

문서

이 페이지 수정 변경 로그

When To Use

To input a value in a range.

Examples

API

Common props ref：Common props

Property	Description	Type	Default	Version
autoFocus	Whether get focus when component mounted	boolean	false
classNames	Semantic structure className	Record<SemanticDOM, string>	-	5.10.0
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 `step` is `null` but exist `marks`, the valid point will only be the `mark`, `min` and `max`	number \| null	1
styles	Semantic structure style	Record<SemanticDOM, React.CSSProperties>	-	5.10.0
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
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 drag	boolean	false	-
editable	Dynamic edit nodes, can't 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 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

Semantic DOM

Design 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

글로벌 토큰어떻게 사용하나요?