# Slider

- Page: https://jiguang132.com/resources/arco-design/docs/slider
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

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

## Install

```bash
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](input-number#inputnumber) \| [InputNumberProps](input-number#inputnumber)[] |`-`|`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 |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt