import {Slider} from '@gravity-ui/uikit';
Slider
(слайдер) — это настраиваемый и отзывчивый React-компонент, который позволяет пользователям выбирать одно значение или диапазон значений из заданного набора данных.
§Варианты слайдера
§Одиночный слайдер
Представляет собой слайдер с одним ползунком для выбора одного значения. Используется по умолчанию.
<Slider />
§Слайдер диапазона
Представляет собой слайдер с двумя ползунками для выбора диапазона. Для его использования необходимо задать defaultValue
(для неконтролируемого компонента) или value
(для контролируемого компонента) в виде массива.
<Slider defaultValue={[20, 40]} />
§Состояния
§Disabled
(отключен)
Состояние Slider
, при котором пользователь не может взаимодействовать с компонентом.
<Slider disabled={true} />
§Error
(ошибка)
Состояние Slider
, которое указывает на некорректный ввод данных пользователем. Для изменения внешнего представления Slider
примените свойство validationState
, задав ему значение "invalid"
. Дополнительно через свойство errorMessage
можно добавить текст сообщения, который будет отображаться под компонентом.
<Slider validationState={"invalid"} />
<Slider validationState={"invalid"} errorMessage="Error message" />
§Размер
Для изменения размера Slider
используйте свойство size
. Размер по умолчанию — m
.
<Slider size="s" />
<Slider size="m" />
<Slider size="l" />
<Slider size="xl" />
§Значение
§Минимальное и максимальное значения
Свойства min
и max
определяют пределы диапазона, который может обрабатывать Slider
. Эти свойства необходимы для установки границ выбираемых значений.
<Slider min={10} />
<Slider max={50} />
<Slider min={20} max={60} />
§Step
(шаг)
Свойство step
компонента Slider
задает величину шага между минимальным и максимальным значениями. Оно контролирует изменение значения при перемещении ползунка.
<Slider step={10} />
§Метки
Свойство marks
задает количество визуальных меток компонента Slider
, указывающих на разные значения в диапазоне от минимума до максимума. Данное свойство делает слайдер более удобным для пользователя и улучшает его визуальное оформление, особенно в тех случаях, когда необходимо обозначить конкретные интервалы. Значение по умолчанию — 2 (min
и max
). Его можно использовать двумя способами:
- Для задания количества визуальных меток на слайдере:
<Slider marks={11} />
- Для указания массива значений меток на слайдере:
<Slider marks={[0, 50, 100]} />
Если в свойстве marks
указать 0
или пустой массив ([]
), то все метки компонента Slider
будут скрыты.
<Slider marks={0} />
Значение метки можно выбрать, даже если оно не соответствует шагу (
step
).
Формат отображения значений меток можно изменить с помощью свойства marksFormat
.
§Определение доступных значений
Установка свойства step
в null
позволяет задать конкретные значения, которые будут доступны на слайдере, вместо непрерывного диапазона. Это особенно полезно в случаях, когда выбор возможен только из заранее определенных дискретных значений. При такой настройке свойства min
, max
и marks
позволяют задать массив чисел, представляющих собой те значения, которые пользователи могут выбрать при работе с компонентом Slider
.
<Slider marks={[10, 20, 50, 55, 65, 80]} step={null}/>
§Стартовая точка трека
Свойство startPoint
позволяет задать стартовое значение, относительно которого будет заполняться трек слайдера. При использовании слайдера диапазона, это свойство игнорируется.
<Slider startPoint={50} />
§Тултип
Свойство tooltipDisplay
в компоненте Slider
управляет поведением отображения тултипа с текущим значением при взаимодействии пользователя со слайдером. Значение auto
позволяет отображать тултип только при наведении курсора на ползунок компонента Slider
или получении компонентом фокуса.
<Slider tooltipDisplay="on" />
Формат отображения значения тултипа можно изменить с помощью свойства tooltipFormat
. Если не указать tooltipformat
, то для отображения значения в тултипе будет использовано свойство marksFormat
.
§Свойства
Имя | Описание | Тип | Значение по умолчанию |
---|---|---|---|
apiRef | Ссылка на свойства focus and blur компонента Slider . | RefObject<SliderRef> | |
autoFocus | Атрибут autofocus для контрола. | boolean | |
className | Имя класса обертки контрола. | string | |
defaultValue | Значение по умолчанию для контрола, используемое при неконтролируемом состоянии компонента. Еси не заполнено, то использует мимнимально значение слайдера | number [number, number] | |
disabled | Указывает на то, что пользователь не может взаимодействовать с контролом. | boolean | false |
errorMessage | Отображаемый текст ошибки. | 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 | Величина, на которую изменяется значение слайдера при каждом перемещении ползунка. Если установить значение null , в качестве шагов будет использоваться свойство marks . | number null | 1 |
startPoint | Задает стартовое значение, относительно которого будет заполняться трек слайдера. При использовании слайдера диапазона, это свойство игнорируется. | number | |
tabIndex | Атрибут tabIndex для контрола. | number [number, number] | |
tooltipDisplay | Управляет поведением отображения тултипа. | off on auto | off |
tooltipFormat | Определяет форматирование отображаемого значения тултипа. Если значение не задано, используется marksFormat . | (value: number) => string | |
validationState | Состояние валидации. | "invalid" | |
value | Значение контрола. | number [number, number] |