Slider

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать value или передавать defaultValue, если требуется задать значение по умолчанию. Для контролируемого режима используйте связку свойств value/onChange для задания значения и его изменения.

// Неконтролируемое состояние
<Slider step={0.2} min={0} max={1} defaultValue={0.4} />;
 
// Контролируемое состояние
const [valueStep, setValueStep] = useState(0.4);
 
<Slider step={0.2} min={0} max={1} value={valueStep} onChange={setValueStep} />;

Диапазон значений

Для возможности задать диапазон значений, передавайте свойство multiple={true}.

В таком случае свойства defaultValue или value (для неконтролируемого режима и контролируемого соответственно) принимают массив из двух числовых значений - [m,n] (где m - значение начального ползунка, n - конечного).

Размеры ползунков

Задаётся свойством size.

• "s" — маленький;
• "m" — средний;
• "l" — большой (по умолчанию).

Значения, соответствующие каждому размеру, зависят от параметра адаптивности sizeY. В режиме sizeY="regular" (мобильные устройства) значения каждого из размеров будут увеличены по сравнению с sizeY="compact".

Всплывающая подсказка

Задаётся свойством withTooltip.

При значении свойства withTooltip={true} наведение на ползунок или фокус на нём вызывает появление всплывающей подсказки с текущим значением. Это особенно полезно, когда точное значение важно для пользователя.

Состояния

disabled

Свойство disabled блокирует взаимодействие с компонентом и добавляет визуальную индикацию недоступности.

Тестирование (e2e)

Для возможности тестирования доступны свойства с постфиксом *TestId, которые вы можете использовать, чтобы находить необходимые части компонента:

• startThumbTestId — id для первого (начального) ползунка;
• endThumbTestId — id для второго (конечного) ползунка (только при multiple={true}).

<Slider multiple startThumbTestId="startSlider" endThumbTestId="endSlider" />

Доступность (a11y)

Компонент реализован с учётом требований доступности:

• использует нативный элемент input[type="range"] для базовой доступности;
• поддерживает управление с клавиатуры (стрелки влево/вправо для изменения значения);
• поддерживает все стандартные aria-атрибуты.

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

• для обозначения того, за что отвечает ползунок, следует передать либо aria-label, либо aria-labelledby;
• по умолчанию скринридер будет читать значение, которое передаётся в value/defaultValue. Чтобы повлиять на это, используйте aria-valuetext или getAriaValueText. Первое свойство полезно для контролируемого компонента, а второе для неконтролируемого, потому что в параметрах передаёт текущее значение ползунка.

Свойства и методы