Suwak zakresu CSS Tailwind tylko dla CSS z podstawowymi, dodatkowymi, akcentowanymi i semantycznymi wariantami kolorów. Rozmiary xs-xl. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
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> |
Używasz kodu Claude'a, kursora lub innego edytora AI?
Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Zakres. Żadnych więcej zajęć z halucynacjami.