Range
Использование
Компонент Range представляет собой два поля ввода какого-либо диапазона. К примеру диапазон цен или дат.
Размер Range
Размер Range задаётся с помощью свойства size:
Вид разделителя
Вид разделителя задается с помощью свойства dividerVariant:
- Dash
- None
- Icon
При таком варианте свойства firstTextfieldTextBefore и secondTextfieldTextBefore становятся обязательными:
При таком варианте свойства dividerIcon становится обязательным:
Валидация и индикация успешного ввода
За индикацию ошибки или успешного ввода отвечают firstValueError, secondValueError, firstValueSuccess, secondValueSuccess.
В данном примере валидация происходит при нажатии клавиши Enter после ввода значений:
Обязательность поля
Наличие индикатора регулируется свойством hasRequiredIndicator.
Обязательность поля задаётся с помощью свойства required.
Если поле является обязательным, то у компонента появляется специальный индикатор.
Изменить расположение индикатора можно с помощью свойства requiredPlacement, которое принимает значения left и right.