Range
Компонент Range — это стилизованный ползунок (слайдер) для выбора числового значения из заданного диапазона. Поддерживает кастомизацию цвета, размеров ползунка и дорожки.
Обзор
- Основное назначение: выбор значения из непрерывного диапазона.
- Ключевые возможности:
- Цветовая палитра.
- Настройка размера ползунка (
thumbSize) и дорожки (trackSize). - Настройка минимального и максимального значений.
- Поддержка
v-model. - CSS-переменные для гибкой стилизации.
API компонента
Props
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
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 | Вызывается при перемещении ползунка. |