Kaydırıcı
Bir sayı aralığından değer seçtiren kaydırıcı. Etiket verildiğinde seçili değer, birimiyle birlikte etiketin sağında anlık olarak gösterilir.
Temel kullanım
Varsayılan aralık 0–100'dür. Başlangıç değerini value ile verin; verilmezse min kullanılır. unit değerin sonuna eklenir. wire:model ya da x-model ile bağlandığında etiketteki değer modeli izler: sunucu değeri değiştirince (doldurma, sıfırlama) etiket de güncellenir.
<acun:range name="oran" label="Müşteri memnuniyeti hedefi" :value="85" unit="%" />| Prop | Değerler |
|---|---|
value | Başlangıç değeri |
unit | Değerin sonuna eklenen metin |
Aralık ve adım
min, max ve step ile aralığı ve artış miktarını belirleyin. Birimle değer arasında boşluk istiyorsanız boşluğu birimin başına yazın (" km").
<acun:range name="yaricap" label="Arama yarıçapı" :min="1" :max="50" :value="10" unit=" km" />
<acun:range name="butce" label="Kampanya bütçesi" :min="0" :max="5000" :step="250" :value="1500" unit=" ₺" />| Prop | Değerler |
|---|---|
min | 0 |
max | 100 |
step | 1 |
Etiketsiz
label verilmezse değer de gösterilmez. Bu durumda alanın ne olduğunu ekran okuyuculara bildirmek için aria-label ekleyin; nitelik doğrudan kaydırıcıya geçer.
<acun:range name="ses" :value="40" aria-label="Bildirim ses düzeyi" />| Prop | Değerler |
|---|---|
aria-label | Görünmeyen erişilebilir ad |
Livewire ile
wire:model ile bağlayın; etiketteki değer modeli izler, sunucu değeri değiştirince de güncellenir. Sayfa ilk açıldığında da doğru görünmesi için aynı değeri value olarak da verin.
<acun:range wire:model.live="yaricap" label="Arama yarıçapı" :min="1" :max="50" :value="$yaricap" unit=" km" />| Prop | Değerler |
|---|---|
wire:model | Bağlanan Livewire özelliği |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
label | null | Etiket; verilirse değer de yanında gösterilir |
min | 0 | En küçük değer |
max | 100 | En büyük değer |
step | 1 | Artış miktarı |
value | null | Başlangıç değeri; boşsa min |
unit | '' | Değerin sonuna eklenen birim ("%", " km") |