Slider

Быстрый старт

Live Editor

Result

Управление внешним видом

Внешний вид компонента определяется свойствами view и size:

Live Editor

Result

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

Передайте массив из двух чисел в value, чтобы использовать двойной слайдер:

Live Editor

Result

Ориентация

Слайдер поддерживает горизонтальное (по умолчанию) и вертикальное отображение через свойство orientation:

Live Editor

Result

Ползунок

С помощью свойств pointerSize и pointerVisibility можно управлять размером и видимостью ползунка:

Live Editor

Result

Текущее значение

Свойство showCurrentValue включает отображение текущего значения над ползунком. Видимость регулируется через currentValueVisibility:

Live Editor

Result

Шкала значений

Свойство showScale отображает минимальное и максимальное значения. Расположение меток задаётся через scaleAlign:

Live Editor

Result

Подпись

С помощью свойства label можно добавить подпись к слайдеру. Расположение подписи управляется через labelPlacement, а иконку можно передать в labelContent:

Live Editor

Result

Шаг изменения

Свойство step задаёт шаг ползунка. Свойство multipleStepSize — увеличенный шаг при нажатии PageUp / PageDown (в процентах от диапазона):

Live Editor

Result

Состояния

Компонент поддерживает состояние disabled:

Live Editor

Result

Контролируемый режим

Компонент поддерживает контролируемый и неконтролируемый режимы. В контролируемом режиме передайте value и onChange; в неконтролируемом — defaultValue и name:

Live Editor

Result

Таблица свойств