Range Component
CSS-only Tailwind CSS range slider with primary, secondary, accent, and semantic color variants. Sizes xs–xl. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Aralık bileşenleri, kullanıcıların etkileşimli bir kaydırıcıyı kullanarak tanımlanmış bir aralıktaki sayısal bir değeri seçmesine olanak tanır. Yerel HTML aralığı girişleri ve pürüzsüz stil ile oluşturulan aralık kaydırıcıları, sürekli değerler üzerinde sezgisel kontrol sağlar. Frutjam serisi sistemi birden fazla boyutu, rengi ve durumu destekler; ses seviyesi kontrolleri, fiyat filtreleri ve zaman çizelgesi temizleme için idealdir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| range | Temel | Tarz aralığı kaydırıcı girişi |
| range-xs | Boyut | Ekstra küçük |
| range-sm | Boyut | Küçük |
| range-md | Boyut | Orta (varsayılan) |
| range-lg | Boyut | Büyük |
| range-xl | Boyut | Ekstra büyük |
| range-primary | Renk | Birincil tema rengi |
| range-secondary | Renk | İkincil tema rengi |
| range-accent | Renk | Vurgu teması rengi |
| range-neutral | Renk | Nötr tema rengi |
| range-info | Renk | Bilgi anlamsal rengi |
| range-success | Renk | Başarı anlamsal rengi |
| range-warning | Renk | Uyarı anlamsal rengi |
| range-error | Renk | Hata anlamsal rengi |
Temel Kullanım
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
Aralık Boyutları
1 2 3 4 5 | <input type="range" min="0" max="100" value="40" class="range range-xs"> <input type="range" min="0" max="100" value="40" class="range range-sm"> <input type="range" min="0" max="100" value="40" class="range range-md"> <input type="range" min="0" max="100" value="40" class="range range-lg"> <input type="range" min="0" max="100" value="40" class="range range-xl"> |
Aralık Renkleri
1 2 3 4 5 6 7 8 | <input type="range" min="0" max="100" value="40" class="range"> <input type="range" min="0" max="100" value="40" class="range range-primary"> <input type="range" min="0" max="100" value="40" class="range range-secondary"> <input type="range" min="0" max="100" value="40" class="range range-accent"> <input type="range" min="0" max="100" value="40" class="range range-info"> <input type="range" min="0" max="100" value="40" class="range range-success"> <input type="range" min="0" max="100" value="40" class="range range-warning"> <input type="range" min="0" max="100" value="40" class="range range-error"> |
Adımlarla Aralık
1 2 3 | <input type="range" min="0" max="100" step="10" value="40" class="range"> <input type="range" min="0" max="100" step="5" value="40" class="range range-primary"> <input type="range" min="0" max="100" step="1" value="40" class="range range-secondary"> |
Etiketli Aralık
1 2 3 4 5 6 7 8 9 | <label> <span class="block text-sm font-medium mb-2">Volume</span> <input type="range" min="0" max="100" value="70" class="range range-primary"> </label> <label> <span class="block text-sm font-medium mb-2">Price Range: $20 - $80</span> <input type="range" min="0" max="100" value="50" class="range"> </label> |
Engelli Aralığı
<input type="range" min="0" max="100" value="40" class="range" disabled> |
İşaretli Menzil
1 2 3 4 5 6 7 8 9 10 | <div> <div class="flex justify-between text-xs mb-2"> <span>0</span> <span>25</span> <span>50</span> <span>75</span> <span>100</span> </div> <input type="range" min="0" max="100" value="50" class="range range-primary w-full"> </div> |