Slider

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

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage of Slider.
State: Default state and disabled state.
Step: Pass in step to set the step size. The default step size is 1. It is recommended that the setting value can be divisible by max-min, otherwise the maximum value that can be selected is less than max. When showTicks is set to true, the ticks of step can be displayed.
Range: Set range = true to enable range selection, at this time value is an array.
Multiple Dots: Select multiple points within the range. (in 2.61.0)
Show Input: When showInput is set to true, the input box will be displayed. But when setting onlyMarkValue to true or selecting multiple points within the range, the input box will never be displayed. When showInput is passed InputNumberProps, the min, max, step properties will be preceded by SliderProps. The segment step size set by the segment input bar is invalid for InputNumber
Marks: You can add mark by passing in marks. When setting onlyMarkValue, only node value can be selected. At this time, step will be ignored.
With Icon: There are icons on both sides of the slider to indicate status.
Vertical: Display vertical slider by setting vertical={true}.
Control Tooltip
Customize Tooltip: Use formatterTooltip to format the content of Tooltip.
Range scale dragging: By setting range.draggableBar to true, the range scale can be dragged.
Optional Range: Set the optional range with min and max.
Reverse: Set reverse={true} to swap the start and end points of the slider.
Segmented Slider: After setting marks, the Slider is actually divided into multiple intervals, and you can pass in getIntervalConfig to set the width and step size of each interval. ** Note: The space will be allocated first to the interval passed in width, and the rest will be allocated the remaining space according to the length of the interval. **

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Slider

Property	Description	Type	DefaultValue	Version
disabled	Whether to disable the component	boolean	`-`	-
onlyMarkValue	Whether only the mark value can be selected	boolean	`-`	-
reverse	Reverse axis, default `true` in `rtl`	boolean	`-`	-
showTicks	Whether to display step tick marks	boolean	`-`	-
tooltipVisible	If true, `Tooltip` will show always, or it will hidden anyway,even if dragging or hovering	boolean	`-`	-
vertical	Whether to display the slider in the vertical direction	boolean	`-`	-
max	Maximum value of sliding range	number	`100`	-
min	Minimum value of sliding range	number	`0`	-
step	Slide the value of one step	number	`1`	-
tooltipPosition	The position of the tooltip	\| 'top'\| 'tl'\| 'tr'\| 'bottom'\| 'bl'\| 'br'\| 'left'\| 'lt'\| 'lb'\| 'right'\| 'rt'\| 'rb'	`-`	-
formatTooltip	Format the content of `tooltip`	(value: number) => string \| ReactNode	`-`	-
className	Additional css class	string \| string[]	`-`	-
defaultValue	To set default value	number \| number[]	`-`	-
marks	The labels on the render ruler. `marks` is an Object, it's `key` is an integer within [min, max].	Record<number, ReactNode>	`-`	-
range	Whether to allow range selection	boolean \| { draggableBar: boolean }	`-`	2.14.0
showInput	Whether to display the input box. When setting `onlyMarkValue` to `true` or selecting multiple points within the range, the input box will never be displayed. Accepts `props` for `InputNumber`.	boolean \| InputNumberProps \| InputNumberProps[]	`-`	`InputNumberProps` in `2.32.0`
style	Additional style	CSSProperties	`-`	-
value	To set value	number \| number[]	`-`	-
getIntervalConfig	For interval configuration, returns the interval step size and the ratio of the width relative to the entire sliding axis (e.g. 0.5 or "50%"). Only valid in `marks` scene	(range: number[],index: number) => { step?: number; width?: number \| string }	`-`	2.30.0
getTooltipContainer	The parent node which the `tooltip` will be rendered to	() => Element	`-`	-
onAfterChange	Callback when `onmouseup` is fired	(val: number \| number[]) => void	`-`	2.20.0
onChange	Callback when the user changed the slider's value	(val: number \| number[]) => void	`-`	-