Slider
Быстрый старт
Управление внешним видом
Внешний вид компонента определяется свойствами view и size:
- View
- Size
Диапазон значений
Передайте массив из двух чисел в value, чтобы использовать двойной слайдер:
Ориентация
Слайдер поддерживает горизонтальное (по умолчанию) и вертикальное отображение через свойство orientation:
- Horizontal
- Vertical
Ползунок
С помощью свойств pointerSize и pointerVisibility можно управлять размером и видимостью ползунка:
- Размер
- Видимость
Текущее значение
Свойство showCurrentValue включает отображение текущего значения рядом с ползунком.
- Видимость
- Расположение
Видимость регулируется через currentValueVisibility:
Свойство valuePlacement задаёт положение текущего значения относительно ползунка.
Для горизонтального слайдера: bottom (по умолчанию) — под ползунком, top — над, none — скрыть.
Для вертикального слайдера: right (по умолчанию) — справа, left — слева, none — скрыть.
Шкала значений
Свойство showScale отображает минимальное и максимальное значения. Расположение меток задаётся через scaleAlign:
- scaleAlign
- scaleTicks
- Кастомные подписи
- tickType
Свойство scaleTicks позволяет задать произвольный набор делений на шкале. При клике на деление ползунок перемещается к нужному значению:
Помимо чисел scaleTicks может принимать массив объектов вида { value, label, labelAlign }:
value— значение деления;label— произвольная подпись (по умолчанию — строковое представлениеvalue);labelAlign— выравнивание подписи относительно точки на шкале:'start' | 'center' | 'end'(по умолчанию'center').
start смещает подпись так, чтобы она начиналась от точки деления, end — чтобы заканчивалась на ней, center — центрирует подпись относительно точки:
Свойство tickType задаёт внешний вид делений на шкале (заданных через scaleTicks):
bullet(по умолчанию) — точка на шкале;separator— деление в виде разделителя, визуально разбивающего дорожку и заполненную часть на скруглённые сегменты. Разделители всегда добавляются на границах трека, еслиmin/maxприсутствуют вscaleTicks, а высота разделителя зависит отpointerSize:
Подпись
С помощью свойства label можно добавить подпись к слайдеру. Расположение подписи управляется через labelPlacement, а иконку можно передать в labelContent:
- labelPlacement
- Иконка
Шаг изменения
Свойство step задаёт шаг ползунка. Свойство multipleStepSize — увеличенный шаг при нажатии PageUp / PageDown (в процентах от диапазона):
Состояния
Компонент поддерживает состояние disabled:
Контролируемый режим
Компонент поддерживает контролируемый и неконтролируемый режимы. В контролируемом режиме передайте value и onChange; в неконтролируемом — defaultValue и name:
- Контролируемый
- Неконтролируемый