# Slider



```tsx
import {Slider} from '@gravity-ui/uikit';
```

The slider is a customizable and responsive React component that allows users to select a single value or a range of values from a specified data set.

## Slider variations

### Single slider

This is a slider with one handle to select a single value. It is used by default.





```tsx
<Slider />
```



### Range slider

This is slider with two handles to select a range. To use it, set `defaultValue` (for an uncontrolled slider) or `value` (for a controlled one) for the array.





```tsx
<Slider defaultValue={[20, 40]} />
```



## States

### Disabled

This is a state of a `Slider` where you do not want to allow the user to work with this component.





```tsx
<Slider disabled={true} />
```



### Error

This `Slider` state is for incorrect user input. To change the `Slider` appearance, use the `validationState` property with the `"invalid"` value. Optionally, you can provide an error message through the `errorMessage` property. This message text will be rendered under the slider.





```tsx
<Slider validationState={"invalid"} />
<Slider validationState={"invalid"} errorMessage="Error message" />
```



## Size

Use the `size` property to manage the `Slider` size. The default size is `m`.





```tsx
<Slider size="s" />
<Slider size="m" />
<Slider size="l" />
<Slider size="xl" />
```



## Value

### Minimum and maximum value

The `min` and `max` properties define the limits of the range the `Slider` can handle. These properties are essential for setting the boundaries of the selectable values.





```tsx
<Slider min={10} />
<Slider max={50} />
<Slider min={20} max={60} />
```



### Step

The `step` property determines the increments within the minimum and maximum value range. This means how much the value changes with a single slider move.





```tsx
<Slider step={10} />
```



### Marks

The `marks` property is utilized in `Slider` component to specify visual markers along the slider that help to indicate various points between the minimum and maximum value. This property enhances the usability and visual interface of the slider, especially for denoting specific intervals. By default it is 2 (`min` and `max` values). You can use it in 2 different ways:

- the amount of visual markers along the slider




```tsx
<Slider marks={11} />
```



- the array of marker values along the slider





```tsx
<Slider marks={[0, 50, 100]} />
```



`0` or empty array `[]` value in `marks` property hide all marks from `Slider`.





```tsx
<Slider marks={0} />
```



> The mark value is available for selection, even if it does not match the `step` value condition

You are able to change display format of marks values by using `marksFormat` property.

#### Define available values

You can set `step` property to `null` to define a set of specific values that the slider can handle, as opposed to a continuous range. This is particularly useful when only certain discrete values are valid for selection. In that case properties `min`, `max` and `marks` allows specifying an array of numbers representing the exact values that users are allowed to select using the `Slider`.





```tsx
<Slider marks={[10, 20, 50, 55, 65, 80]} step={null} />
```



## Start point

The `startPoint` property allows you to set the start point of the track. It uses the minimal `Slider` value by default. It will be ignored if you use `Slider` with range values.





```tsx
<Slider startPoint={50} />
```



## Tooltip

The `tooltipDisplay` property is used in `Slider` component to control the display behaviour of a tooltip that shows the current value as the user interacts with the slider. `auto` value shows tooltip only when `Slider`'s handle are hovered by cursor or focused.





```tsx
<Slider tooltipDisplay="on" />
```



You are able to change display format of tooltip value by using `tooltipFormat` property. If you don't specify `tooltipformat` then will be used `marksFormat` to display the value in tooltip.

## Properties

| Name                             | Description                                                                                                                                                                              |                         Type                         | Default |
| :------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------: | :-----: |
| apiRef                           | Ref to Slider's component props of focus and blur                                                                                                                                        |                `RefObject<SliderRef>`                |         |
| autoFocus                        | The control's `autofocus` attribute                                                                                                                                                      |                      `boolean`                       |         |
| className                        | The control's wrapper class name                                                                                                                                                         |                       `string`                       |         |
| [defaultValue](#slider-variants) | The control's default value, used when the component is not controlled. It uses the minimal `Slider` value by default.                                                                   |             `number` `[number, number]`              |         |
| [disabled](#disabled)            | Indicates that the user cannot interact with the control                                                                                                                                 |                      `boolean`                       | `false` |
| [errorMessage](#error)           | Text of an error to show                                                                                                                                                                 |                       `string`                       |         |
| [marks](#marks)                  | Text marks under the slider. Could be set to the amount of the slider's marks, or could be set to the array of values which should have marks. `0` or empty array value hides all marks. |                 `number` `number[]`                  |   `2`   |
| [marksFormat](#marks)            | Formatter for the mark's displayed value                                                                                                                                                 |             `(value: number) => string`              |         |
| [max](#min-and-max-value)        | The maximum value of the component.                                                                                                                                                      |                       `number`                       |  `100`  |
| [min](#min-and-max-value)        | The minimum value of the component.                                                                                                                                                      |                       `number`                       |   `0`   |
| onBlur                           | Fires when the control lost focus. Provides focus event as a callback's argument                                                                                                         | `((e: FocusEvent<HTMLDivElement, Element>) => void)` |         |
| onUpdate                         | Fires when the slider’s value is changed by the user. Provides change event as an callback's argument                                                                                    |   `((value: number \| [number, number]) => void)`    |         |
| onUpdateComplete                 | Fires when ontouchend or onmouseup is triggered. Provides change event as an callback's argument                                                                                         |   `((value: number \| [number, number]) => void)`    |         |
| onFocus                          | Fires when the control gets focus. Provides focus event as a callback's argument                                                                                                         | `((e: FocusEvent<HTMLDivElement, Element>) => void)` |         |
| [size](#size)                    | The size of the control                                                                                                                                                                  |               `"s"` `"m"` `"l"` `"xl"`               |  `"m"`  |
| [step](#step)                    | Value to be added or subtracted on each step the slider makes. Can be set to `null` to make `marks` as steps.                                                                            |                   `number` `null`                    |   `1`   |
| [startPoint](#start-point)       | Start point of the track. Ignored for range slider.                                                                                                                                      |                       `number`                       |         |
| tabIndex                         | The control's `tabIndex` attribute                                                                                                                                                       |             `number` `[number, number]`              |         |
| [tooltipDisplay](#tooltip)       | The tooltip's display behaviour                                                                                                                                                          |                  `off` `on` `auto`                   |  `off`  |
| [tooltipFormat](#tooltip)        | Formatter for the tooltip's displayed value. Uses `marksFormat` if not set                                                                                                               |             `(value: number) => string`              |         |
| [validationState](#error)        | Validation state                                                                                                                                                                         |                     `"invalid"`                      |         |
| [value](#slider-variants)        | The value of the control                                                                                                                                                                 |             `number` `[number, number]`              |         |