# Slider



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

`Slider` (слайдер) — это настраиваемый и отзывчивый React-компонент, который позволяет пользователям выбирать одно значение или диапазон значений из заданного набора данных.

## Варианты слайдера

### Одиночный слайдер

Представляет собой слайдер с одним ползунком для выбора одного значения. Используется по умолчанию.





```tsx
<Slider />
```



### Слайдер диапазона

Представляет собой слайдер с двумя ползунками для выбора диапазона. Для его использования необходимо задать `defaultValue` (для неконтролируемого компонента) или `value` (для контролируемого компонента) в виде массива.





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



## Состояния

### `Disabled` (отключен)

Состояние `Slider`, при котором пользователь не может взаимодействовать с компонентом.





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



### `Error` (ошибка)

Состояние `Slider`, которое указывает на некорректный ввод данных пользователем. Для изменения внешнего представления `Slider` примените свойство `validationState`, задав ему значение `"invalid"`. Дополнительно через свойство `errorMessage` можно добавить текст сообщения, который будет отображаться под компонентом.





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



## Размер

Для изменения размера `Slider` используйте свойство `size`. Размер по умолчанию — `m`.





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



## Значение

### Минимальное и максимальное значения

Свойства `min` и `max` определяют пределы диапазона, который может обрабатывать `Slider`. Эти свойства необходимы для установки границ выбираемых значений.





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



### `Step` (шаг)

Свойство `step` компонента `Slider` задает величину шага между минимальным и максимальным значениями. Оно контролирует изменение значения при перемещении ползунка.





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



### Метки

Свойство `marks` задает количество визуальных меток компонента `Slider`, указывающих на разные значения в диапазоне от минимума до максимума. Данное свойство делает слайдер более удобным для пользователя и улучшает его визуальное оформление, особенно в тех случаях, когда необходимо обозначить конкретные интервалы. Значение по умолчанию — 2 (`min` и `max`). Его можно использовать двумя способами:

- Для задания количества визуальных меток на слайдере:




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



- Для указания массива значений меток на слайдере:





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



Если в свойстве `marks` указать `0` или пустой массив (`[]`), то все метки компонента `Slider` будут скрыты.





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



> Значение метки можно выбрать, даже если оно не соответствует шагу (`step`).

Формат отображения значений меток можно изменить с помощью свойства `marksFormat`.

#### Определение доступных значений

Установка свойства `step` в `null` позволяет задать конкретные значения, которые будут доступны на слайдере, вместо непрерывного диапазона. Это особенно полезно в случаях, когда выбор возможен только из заранее определенных дискретных значений. При такой настройке свойства `min`, `max` и `marks` позволяют задать массив чисел, представляющих собой те значения, которые пользователи могут выбрать при работе с компонентом `Slider`.





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



## Стартовая точка трека

Свойство `startPoint` позволяет задать стартовое значение, относительно которого будет заполняться трек слайдера. При использовании слайдера диапазона, это свойство игнорируется.





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



## Тултип

Свойство `tooltipDisplay` в компоненте `Slider` управляет поведением отображения тултипа с текущим значением при взаимодействии пользователя со слайдером. Значение `auto` позволяет отображать тултип только при наведении курсора на ползунок компонента `Slider` или получении компонентом фокуса.





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



Формат отображения значения тултипа можно изменить с помощью свойства `tooltipFormat`. Если не указать `tooltipformat`, то для отображения значения в тултипе будет использовано свойство `marksFormat`.

## Свойства

| Имя                                         | Описание                                                                                                                                                                                  |                         Тип                          | Значение по умолчанию |
| :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------: | :-------------------: |
| apiRef                                      | Ссылка на свойства `focus` and `blur` компонента `Slider`.                                                                                                                                |                `RefObject<SliderRef>`                |                       |
| autoFocus                                   | Атрибут `autofocus` для контрола.                                                                                                                                                         |                      `boolean`                       |                       |
| className                                   | Имя класса обертки контрола.                                                                                                                                                              |                       `string`                       |                       |
| [defaultValue](#варианты-слайдера)          | Значение по умолчанию для контрола, используемое при неконтролируемом состоянии компонента. Еси не заполнено, то использует мимнимально значение слайдера                                 |             `number` `[number, number]`              |                       |
| [disabled](#disabled-отключен)              | Указывает на то, что пользователь не может взаимодействовать с контролом.                                                                                                                 |                      `boolean`                       |        `false`        |
| [errorMessage](#error-ошибка)               | Отображаемый текст ошибки.                                                                                                                                                                |                       `string`                       |                       |
| [marks](#метки)                             | Текстовые метки под слайдером. В данном свойстве можно задать количество меток или массив значений, для которых они должны отображаться. При указании `0` или `[]` метки не отображаются. |                 `number` `number[]`                  |          `2`          |
| [marksFormat](#метки)                       | Определяет форматирование отображаемого значения метки.                                                                                                                                   |             `(value: number) => string`              |                       |
| [max](#минимальное-и-максимальное-значения) | Максимальное значение компонента.                                                                                                                                                         |                       `number`                       |         `100`         |
| [min](#минимальное-и-максимальное-значения) | Минимальное значение компонента.                                                                                                                                                          |                       `number`                       |          `0`          |
| onBlur                                      | Срабатывает, когда контрол теряет фокус. Передает событие фокуса в качестве аргумента обратного вызова.                                                                                   | `((e: FocusEvent<HTMLDivElement, Element>) => void)` |                       |
| onUpdate                                    | Срабатывает, когда пользователь изменяет значение слайдера. Передает событие изменения в качестве аргумента обратного вызова.                                                             |   `((value: number \| [number, number]) => void)`    |                       |
| onUpdateComplete                            | Активируется при срабатывании события `ontouchend` (завершение касания) или `onmouseup` (отпускание кнопки мыши). Передает событие изменения в качестве аргумента обратного вызова.       |   `((value: number \| [number, number]) => void)`    |                       |
| onFocus                                     | Срабатывает, когда контрол получает фокус. Передает событие фокуса в качестве аргумента обратного вызова.                                                                                 | `((e: FocusEvent<HTMLDivElement, Element>) => void)` |                       |
| [size](#размер)                             | Размер контрола.                                                                                                                                                                          |               `"s"` `"m"` `"l"` `"xl"`               |         `"m"`         |
| [step](#step-шаг)                           | Величина, на которую изменяется значение слайдера при каждом перемещении ползунка. Если установить значение `null`, в качестве шагов будет использоваться свойство `marks`.               |                   `number` `null`                    |          `1`          |
| [startPoint](#стартовая-точка-трека)        | Задает стартовое значение, относительно которого будет заполняться трек слайдера. При использовании слайдера диапазона, это свойство игнорируется.                                        |                       `number`                       |                       |
| tabIndex                                    | Атрибут `tabIndex` для контрола.                                                                                                                                                          |             `number` `[number, number]`              |                       |
| [tooltipDisplay](#тултип)                   | Управляет поведением отображения тултипа.                                                                                                                                                 |                  `off` `on` `auto`                   |         `off`         |
| [tooltipFormat](#тултип)                    | Определяет форматирование отображаемого значения тултипа. Если значение не задано, используется `marksFormat`.                                                                            |             `(value: number) => string`              |                       |
| [validationState](#error-ошибка)            | Состояние валидации.                                                                                                                                                                      |                     `"invalid"`                      |                       |
| [value](#варианты-слайдера)                 | Значение контрола.                                                                                                                                                                        |             `number` `[number, number]`              |                       |