TextFieldSlider
Быстрый старт
Управление внешним видом
Внешний вид компонента зависит от свойств view и size:
- View
- Size
Шкала значений
С помощью свойства hasScale можно отобразить минимальное и максимальное значения под слайдером:
Метки на шкале
С помощью свойства scaleTicks можно задать массив числовых значений для отображения меток (точек и подписей) под слайдером. Точки закрашиваются в зависимости от текущего значения: отмечены те, которые меньше или равны ему. Клик по метке перемещает слайдер к соответствующему значению. При использовании scaleTicks минимум и максимум из hasScale не отображаются.
- Основное
- С форматированием
Метки отображаются с учётом настроек форматирования (thousandSeparator, decimalScale и др.):
Шаг изменения
С помощью свойства step можно задать шаг изменения значения:
Форматирование чисел
Компонент поддерживает форматирование чисел с настройкой разделителей, количества знаков после запятой и стиля группировки:
- Знаки после запятой
- Разделитель тысяч
- Фиксированные нули
С помощью свойства decimalScale можно указать количество знаков после запятой:
С помощью свойства thousandSeparator можно настроить разделитель тысяч:
С помощью свойства fixedDecimalScale можно добавить нули до заданного количества знаков после запятой:
Ручка слайдера
С помощью свойства hasPointer можно управлять отображением ручки слайдера:
Дополнительный контент
Компонент поддерживает добавление различного контента к полю ввода:
- Подпись
- Вспомогательный текст
- Слоты контента
С помощью свойства titleCaption можно добавить подпись к компоненту:
С помощью свойств textBefore и textAfter можно добавить вспомогательный текст:
С помощью свойств contentLeft и contentRight можно добавить произвольный контент:
Индикаторы обязательности
Компонент поддерживает отображение индикаторов обязательности или опциональности:
Состояния
Компонент поддерживает различные состояния с помощью свойств disabled и readOnly:
- Disabled
- ReadOnly
Контролируемый режим
Компонент может работать как в контролируемом, так и в неконтролируемом режиме:
- Контролируемый
- Неконтролируемый
Обработка событий
Компонент предоставляет различные колбэки для обработки изменений:
Валидация
Компонент автоматически валидирует введенные значения. При попытке ввести значение больше максимального или меньше минимального, отображается анимация ошибки и значение возвращается к границе диапазона: