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.
Les composants de plage permettent aux utilisateurs de sélectionner une valeur numérique dans une plage définie à l'aide d'un curseur interactif. Construits avec des entrées de plage HTML natives et un style fluide, les curseurs de plage offrent un contrôle intuitif sur les valeurs continues. Le système de la gamme Frutjam prend en charge plusieurs tailles, couleurs et états, ce qui est idéal pour les contrôles de volume, les filtres de prix et le nettoyage de la chronologie.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
|---|---|---|
| range | Base | Entrée du curseur de plage stylisée |
| range-xs | Taille | Très petit |
| range-sm | Taille | Petit |
| range-md | Taille | Moyen (par défaut) |
| range-lg | Taille | Grand |
| range-xl | Taille | Très grand |
| range-primary | Couleur | Couleur du thème principal |
| range-secondary | Couleur | Couleur du thème secondaire |
| range-accent | Couleur | Couleur du thème d'accentuation |
| range-neutral | Couleur | Couleur du thème neutre |
| range-info | Couleur | Couleur sémantique de l'information |
| range-success | Couleur | Couleur sémantique du succès |
| range-warning | Couleur | Couleur sémantique d’avertissement |
| range-error | Couleur | Couleur sémantique des erreurs |
Utilisation de base
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
Tailles de gamme
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"> |
Couleurs de la gamme
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"> |
Gamme avec marches
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"> |
Gamme avec étiquette
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> |
Portée désactivée
<input type="range" min="0" max="100" value="40" class="range" disabled> |
Gamme avec marques
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> |