Control deslizante de rango CSS Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs-xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de rango permiten a los usuarios seleccionar un valor numérico dentro de un rango definido mediante un control deslizante interactivo. Construidos con entradas de rango HTML nativas y un estilo suave, los controles deslizantes de rango brindan control intuitivo sobre valores continuos. El sistema de gama Frutjam admite múltiples tamaños, colores y estados, ideal para controles de volumen, filtros de precios y limpieza de líneas de tiempo.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| range | Base | Entrada del control deslizante de rango con estilo |
| range-xs | Tamaño | extrapequeño |
| range-sm | Tamaño | Pequeño |
| range-md | Tamaño | Medio (predeterminado) |
| range-lg | Tamaño | Grande |
| range-xl | Tamaño | Extra grande |
| range-primary | Color | Color del tema principal |
| range-secondary | Color | Color del tema secundario |
| range-accent | Color | Color del tema de acento |
| range-neutral | Color | Color de tema neutro |
| range-info | Color | Color semántico de información |
| range-success | Color | Color semántico del éxito |
| range-warning | Color | Color semántico de advertencia |
| range-error | Color | Color semántico del error |
Uso básico
<input type="range" min="0" max="100" value="40" class="range"> |
<input type="range" min="0" max="100" value="40" className="range"> |
Tamaños de rango
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"> |
Colores de gama
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"> |
Rango con pasos
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"> |
Gama con etiqueta
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> |
Rango deshabilitado
<input type="range" min="0" max="100" value="40" class="range" disabled> |
Rango con marcas
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> |
¿Usando Claude Code, Cursor u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Rango según sea necesario. No más clases alucinadas.