Slider

Penggunaan

v-model adalah number biasa untuk satu handle:

<script setup lang="ts">
const value = ref(30)
</script>

<template>
  <SSlider v-model="value" aria-label="Volume" />
</template>

Range

Berikan array sebagai gantinya untuk mendapatkan range slider dengan satu handle per entri - minStepsBetweenThumbs mencegah mereka bersilangan (atau mendekat lebih dekat dari sejumlah langkah tersebut). Nilai yang Anda dapatkan selalu cocok dengan bentuk yang Anda berikan - array masuk, array keluar:

<script setup lang="ts">
const priceRange = ref([20, 80])
</script>

<template>
  <SSlider v-model="priceRange" :min-steps-between-thumbs="5" />
</template>

Min, max, dan step

min/max (default 0/100) membatasi nilai, step (default 1) mengontrol increment - baik drag maupun tombol panah snap kepadanya.

Ticks

show-ticks menandai setiap langkah di sepanjang track - tambahan Selaras, bukan bagian dari primitif Reka sendiri:

<SSlider v-model="value" :step="25" show-ticks />

Warna

<SSlider :model-value="60" color="danger" />

Vertikal

orientation="vertical" membutuhkan tinggi nyata untuk diukur - tema memberikan default yang masuk akal (timpa melalui :ui.root untuk yang lebih tinggi/pendek):

<SSlider v-model="value" orientation="vertical" />

Inverted

inverted secara visual (dan secara arah) membalik slider - ujung max merender di tempat ujung min biasanya, dan dragging dibalik untuk mencocokkan:

<SSlider v-model="value" inverted aria-label="Volume (inverted)" />

Thumb variant

thumb-variant="bar" mengganti thumb lingkaran default dengan bar tipis, berukuran dari size dan orientation track sendiri:

<SSlider v-model="value" thumb-variant="bar" />

Start dan end slots

#start/#end merender konten yang mengapit track - ikon, emoji, label unit:

<SSlider v-model="value">
  <template #start>😞</template>
  <template #end></template>
</SSlider>

Tooltip

tooltip membungkus setiap thumb dalam tooltip yang menunjukkan nilai saat ini saat hover atau fokus:

<SSlider v-model="value" tooltip />

Controls

controls menambahkan tombol -/+ yang mengapit track dan melangkahkan nilai sebesar step, menonaktifkan di min/max - hanya dirender untuk slider nilai tunggal, karena melangkahkan dua thumb rentang independen dengan satu pasang tombol bersama tidak memiliki arti tunggal yang jelas:

<SSlider v-model="value" controls />

Side labels

Teks polos di kedua sisi track dikomposisi tanpa API ekstra:

<div class="flex items-center gap-3">
  <span>Low</span>
  <SSlider v-model="value" />
  <span>High</span>
</div>

Dipasangkan dengan number input

SSlider dan SInputNumber berbagi satu v-model memberikan nilai yang dapat diketik persis di samping kontrol drag:

<div class="flex items-center gap-3">
  <SSlider v-model="value" />
  <SInputNumber v-model="value" :min="0" :max="100" />
</div>

Label aksesibel

Thumb slider tidak memiliki teks yang terlihat sendiri, jadi ia membutuhkan nama yang dapat diakses dari suatu tempat. aria-label (string tunggal) berlaku untuk setiap thumb - baik untuk slider satu handle. Untuk range slider, primitif Reka sendiri sudah fallback ke "Minimum"/"Maximum" untuk slider dua thumb tanpa label sama sekali; berikan array ke aria-label untuk mengatakan sesuatu yang lebih spesifik sebagai gantinya (['Low priority', 'High priority'], misalnya):

<SSlider v-model="priceRange" :aria-label="['Minimum price', 'Maximum price']" />

Committing vs. continuous updates

update:model-value (yang digunakan v-model) terpicu terus-menerus saat dragging. value-commit terpicu sekali, hanya ketika drag selesai dengan nilai yang benar-benar berubah - berguna untuk apa pun yang tidak boleh dijalankan pada setiap frame perantara, seperti request yang di-debounce:

<SSlider v-model="value" @value-commit="(v) => fetchResultsFor(v)" />

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema Slider sendiri:

Props

Events

Slots