Slider

Maintainer:
Arucard89
GitHub
tooltipDisplay
disabled
validationState
errorMessage
size
min
max
step
marks
import {Slider} from '@gravity-ui/uikit';

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

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

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

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

0100
Selected value: 0
<Slider />

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

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

0100
Selected value: 20,40
<Slider defaultValue={[20, 40]} />

Состояния

Disabled (отключен)

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

0100
Selected value: 0
<Slider disabled={true} />

Error (ошибка)

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

0100
Selected value: 0
0100
Error message
Selected value: 0
<Slider validationState={"invalid"} />
<Slider validationState={"invalid"} errorMessage="Error message" />

Размер

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

0100
Selected value: 0
0100
Selected value: 0
0100
Selected value: 0
0100
Selected value: 0
<Slider size="s" />
<Slider size="m" />
<Slider size="l" />
<Slider size="xl" />

Значение

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

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

10100
Selected value: 10
050
Selected value: 0
2060
Selected value: 20
<Slider min={10} />
<Slider max={50} />
<Slider min={20} max={60} />

Step (шаг)

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

0100
Selected value: 0
<Slider step={10} />

Метки

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

  • Для задания количества визуальных меток на слайдере:
0102030405060708090100
Selected value: 0
<Slider marks={11} />
  • Для указания массива значений меток на слайдере:
0100
Selected value: 0
<Slider marks={[0, 50, 100]} />

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

0100
Selected value: 0
<Slider marks={0} />

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

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

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

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

0100
Selected value: 0
<Slider marks={[10, 20, 50, 55, 65, 80]} step={null}/>

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

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

0100
Selected value: 0
<Slider startPoint={50} />

Тултип

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

0
0100
Selected value: 0
<Slider tooltipDisplay="on" />

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

Свойства

ИмяОписаниеТипЗначение по умолчанию
apiRefСсылка на свойства focus and blur компонента Slider.RefObject<SliderRef>
autoFocusАтрибут autofocus для контрола.boolean
classNameИмя класса обертки контрола.string
defaultValueЗначение по умолчанию для контрола, используемое при неконтролируемом состоянии компонента. Еси не заполнено, то использует мимнимально значение слайдераnumber [number, number]
disabledУказывает на то, что пользователь не может взаимодействовать с контролом.booleanfalse
errorMessageОтображаемый текст ошибки.string
marksТекстовые метки под слайдером. В данном свойстве можно задать количество меток или массив значений, для которых они должны отображаться. При указании 0 или [] метки не отображаются.number number[]2
marksFormatОпределяет форматирование отображаемого значения метки.(value: number) => string
maxМаксимальное значение компонента.number100
minМинимальное значение компонента.number0
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 null1
startPointЗадает стартовое значение, относительно которого будет заполняться трек слайдера. При использовании слайдера диапазона, это свойство игнорируется.number
tabIndexАтрибут tabIndex для контрола.number [number, number]
tooltipDisplayУправляет поведением отображения тултипа.off on autooff
tooltipFormatОпределяет форматирование отображаемого значения тултипа. Если значение не задано, используется marksFormat.(value: number) => string
validationStateСостояние валидации."invalid"
valueЗначение контрола.number [number, number]