Slider
Повзунок на нативному input range — заливка треку, aria-valuetext, зона 44px.
Обгортка над нативним <input type="range">: власний drag-механізм тут
не потрібен — нативний уже вміє клавіатуру (стрілки, Home/End,
PageUp/Down) і дотик. Компонент додає стилі обох тем, заливку треку і
підписи.
Приклад
Крок 2 з 3 — клікайте по кроках або ведіть станом.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
label | string | undefined | Видимий лейбл. Обов'язковий, якщо немає `ariaLabel`. |
name | string | undefined | — |
modelValue | number | null | Значення. Використовуйте через `v-model`. |
ariaLabel | string | undefined | Доступна назва — коли лейбла немає. |
min | number | 0 | Мінімум шкали. |
max | number | 100 | Максимум шкали. |
step | number | 1 | Крок стрілками. |
unit | string | undefined | Суфікс значення: %, px, ℃… |
error | string | undefined | Текст помилки. Сама його наявність вмикає стан помилки. |
hint | string | undefined | Підказка під полем. Ховається, коли показано помилку. |
id | string | — | Стабільний DOM id. `name` використовується лише для форми. |
showBounds | boolean | false | Показувати підписи min/max під смугою. |
showValue | boolean | false | Показувати числове значення праворуч від лейбла. |
disabled | boolean | false | — |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: number] | Нове значення. Використовуйте через `v-model`. |
Коли використовувати
Наближені числові значення: гучність, прозорість, температура моделі.
Точний ввід — поруч поле з числом, пов'язане тим самим v-model.
Коли НЕ використовувати
Для точного введення — поле Input type="number": влучити пальцем у
конкретне значення смугою важко.
Для діапазону «від — до» цей компонент не годиться: один повзунок несе одне значення.
Доступність
aria-valuetext робить читання людським: «47 %», а не «47». Зона
натискання на дотику — 44px висоти (смуга візуально тонка, сам input
високий). Лейбл зв'язаний з полем через for/id.
Деталі реалізації
Заливка зліва — WebKit через градієнт від CSS-змінної
--fill-percent, Firefox через нативний ::-moz-range-progress.
Тільки токени — жодних сирих кольорів.