Компонент Range — это стилизованный ползунок (слайдер) для выбора числового значения из заданного диапазона. Поддерживает кастомизацию цвета, размеров ползунка и дорожки.
- Основное назначение: выбор значения из непрерывного диапазона.
- Ключевые возможности:
- Цветовая палитра.
- Настройка размера ползунка (
thumbSize) и дорожки (trackSize). - Настройка минимального и максимального значений.
- Поддержка
v-model. - CSS-переменные для гибкой стилизации.
| Проп | Тип | По умолчанию | Описание |
|---|
modelValue | Number | String | | Текущее значение ползунка (v-model). |
min | Number | String | 0 | Минимальное значение. |
max | Number | String | 100 | Максимальное значение. |
color | String | 'neutral' | Цвет ползунка. Возможные значения: 'neutral', 'primary', 'secondary', 'success', 'error', 'warning', 'info'. |
thumbSize | String | | Размер ползунка (бегунка). Принимает любое валидное CSS-значение. Устанавливает CSS-переменную --thumb-size. |
trackSize | String | | Высота дорожки. Принимает любое валидное CSS-значение. Устанавливает CSS-переменную --track-h. |
style | Object | {} | Дополнительные CSS-стили. |
className | String | | Дополнительные CSS-классы. |
| Событие | Параметр | Описание |
|---|
update:modelValue | String | Вызывается при перемещении ползунка. |
