Slider

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} />

§Инвертированный трек

Свойство inverted позволяет инвертировать положение трека на слайдере. По умолчанию (так же, как и при false) слайдер отображает трек от min до указателя слайдера. При значении свойства true трек будет отображаться от значения слайдера до max. Данное свойство игнорируется для слайдера диапазона. При установке значения данного свойства в true значение свойства startPoint будет проигнорировано.

<Slider inverted />

§Тултип

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

<Slider tooltipDisplay="on" />

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

§Свойства

| tabIndex | Атрибут tabIndex для контрола. | number [number, number] | | | tooltipDisplay | Управляет поведением отображения тултипа. | off on auto | off | | tooltipFormat | Определяет форматирование отображаемого значения тултипа. Если значение не задано, используется marksFormat. | (value: number) => string | | | validationState | Состояние валидации. | "invalid" | | | value | Значение контрола. | number [number, number] | |