Range

Использование

Компонент Range представляет собой два поля ввода какого-либо диапазона. К примеру диапазон цен или дат.

Live Editor

Result

Размер Range

Размер Range задаётся с помощью свойства size:

Live Editor

Result

Вид разделителя

Вид разделителя задается с помощью свойства dividerVariant:

Live Editor

Result

Валидация и индикация успешного ввода

За индикацию ошибки или успешного ввода отвечают firstValueError, secondValueError, firstValueSuccess, secondValueSuccess. В данном примере валидация происходит при нажатии клавиши Enter после ввода значений:

Live Editor

Result

Обязательность поля

Обязательность поля задаётся с помощью свойства required. Если поле является обязательным, то у компонента появляется специальный индикатор. Изменить расположение индикатора можно с помощью свойства requiredPlacement, которое принимает значения left и right.

Live Editor

Result