Slider

Повзунок для одного значення на основі нативного <input type="range">, обгорнутий у ControlElement.

Живе демо

Базове

Гучність

Значення: 40

Показ значення

Площа

60 м²

Дробовий крок

Прозорість

0.5

Розміри

xs

sm

md

lg

xl

Горизонтальне розташування, вимкнений стан, помилка

Горизонтально

Вимкнено

З помилкою

Занадто гучно

Використання

<template>
  <orio-slider v-model="area" label="Площа" :min="20" :max="200" :step="5">
    <template #after>
      <orio-view-text>{{ area }} м²</orio-view-text>
    </template>
  </orio-slider>
</template>

<script setup>
import { ref } from 'vue'

const area = ref(60)
</script>

Пропси

Розширює ControlProps (label, error, size, layout, disabled, required, name, …) — див. ControlElement.

Проп	Тип	За замовчуванням	Опис
modelValue	number	0	Поточне значення (v-model)
min	number	0	Найменше значення
max	number	100	Найбільше значення
step	number	1	Крок; значення прив'язуються до нього

Події

Подія	Дані	Опис
update:modelValue	number	Під час перетягування або зміни з клавіатури; обмежене min–max і прив'язане до step

Слоти

Слот	Опис
before	Вміст перед доріжкою
after	Вміст після доріжки (наприклад, значення)

Підтримка клавіатури

Нативна поведінка range: стрілки — крок, Page Up/Down — стрибок, Home/End — до min/max.

Стилізація

--color-accent          /* Заповнена доріжка, обвідка повзунка, фокус */
--color-accent-hover    /* Диск повзунка */
--color-border          /* Незаповнена доріжка */
--color-bg              /* Кільце повзунка */
--control-slider-thumb  /* Діаметр повзунка, залежить від size */
--control-slider-track  /* Висота доріжки, залежить від size */