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.
Komponenty zakresu umożliwiają użytkownikom wybranie wartości liczbowej w zdefiniowanym zakresie za pomocą interaktywnego suwaka. Zbudowane z natywnych danych wejściowych zakresu HTML i płynnej stylizacji, suwaki zakresu zapewniają intuicyjną kontrolę nad wartościami ciągłymi. System asortymentu Frutjam obsługuje wiele rozmiarów, kolorów i stanów — idealnie nadaje się do kontroli głośności, filtrów cenowych i przeglądania osi czasu.
Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
| Klasa | Typ | Opis |
|---|---|---|
| range | Opierać | Stylizowane wejście suwaka zakresu |
| range-xs | Rozmiar | Bardzo mały |
| range-sm | Rozmiar | Mały |
| range-md | Rozmiar | Średni (domyślny) |
| range-lg | Rozmiar | Duży |
| range-xl | Rozmiar | Bardzo duży |
| range-primary | Kolor | Podstawowy kolor motywu |
| range-secondary | Kolor | Kolor motywu drugorzędnego |
| range-accent | Kolor | Kolor motywu akcentującego |
| range-neutral | Kolor | Neutralny kolor motywu |
| range-info | Kolor | Kolor semantyczny informacji |
| range-success | Kolor | Sukces semantyczny kolor |
| range-warning | Kolor | Ostrzeżenie kolor semantyczny |
| range-error | Kolor | Błąd koloru semantycznego |
Podstawowe użycie
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
Rozmiary zakresu
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"> |
Zakres kolorów
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"> |
Zasięg ze stopniami
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"> |
Zakres z etykietą
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> |
Wyłączony zakres
<input type="range" min="0" max="100" value="40" class="range" disabled> |
Zasięg ze znakami
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> |