Penggeser rentang Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran XS-XL. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
Komponen rentang memungkinkan pengguna memilih nilai numerik dalam rentang yang ditentukan menggunakan penggeser interaktif. Dibuat dengan input rentang HTML asli dan gaya halus, penggeser rentang memberikan kontrol intuitif atas nilai berkelanjutan. Sistem rangkaian Frutjam mendukung berbagai ukuran, warna, dan status—ideal untuk kontrol volume, filter harga, dan penggosokan garis waktu.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
|---|---|---|
| range | Basis | Masukan penggeser rentang bergaya |
| range-xs | Ukuran | Sangat kecil |
| range-sm | Ukuran | Kecil |
| range-md | Ukuran | Sedang (standar) |
| range-lg | Ukuran | Besar |
| range-xl | Ukuran | Ekstra besar |
| range-primary | Warna | Warna tema utama |
| range-secondary | Warna | Warna tema sekunder |
| range-accent | Warna | Warna tema aksen |
| range-neutral | Warna | Warna tema netral |
| range-info | Warna | Info warna semantik |
| range-success | Warna | Warna semantik sukses |
| range-warning | Warna | Warna semantik peringatan |
| range-error | Warna | Kesalahan warna semantik |
Penggunaan Dasar
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
Ukuran Rentang
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"> |
Rentang Warna
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"> |
Rentang dengan Langkah
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"> |
Rentang dengan Label
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> |
Rentang Dinonaktifkan
<input type="range" min="0" max="100" value="40" class="range" disabled> |
Rentang dengan Tanda
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> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP memberi editor AI Anda nama dan struktur kelas Jangkauan yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.