Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip, yalnızca CSS'ye özgü Tailwind CSS aralığı kaydırıcısı. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
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> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam Menzil sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.