Controle deslizante de intervalo CSS Tailwind somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs-xl. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.
Os componentes de intervalo permitem que os usuários selecionem um valor numérico dentro de um intervalo definido usando um controle deslizante interativo. Construídos com entradas de intervalo HTML nativo e estilo suave, os controles deslizantes de intervalo fornecem controle intuitivo sobre valores contínuos. O sistema da linha Frutjam oferece suporte a vários tamanhos, cores e estados – ideal para controles de volume, filtros de preços e limpeza de linha do tempo.
Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.
| Aula | Tipo | Descrição |
|---|---|---|
| range | Base | Entrada do controle deslizante de intervalo estilizado |
| range-xs | Tamanho | Extra pequeno |
| range-sm | Tamanho | Pequeno |
| range-md | Tamanho | Médio (padrão) |
| range-lg | Tamanho | Grande |
| range-xl | Tamanho | Extra grande |
| range-primary | Cor | Cor do tema principal |
| range-secondary | Cor | Cor do tema secundário |
| range-accent | Cor | Cor do tema de destaque |
| range-neutral | Cor | Cor neutra do tema |
| range-info | Cor | Cor semântica da informação |
| range-success | Cor | Cor semântica de sucesso |
| range-warning | Cor | Cor semântica de aviso |
| range-error | Cor | Cor semântica do erro |
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"> |
Tamanhos de intervalo
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"> |
Cores da 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"> |
Alcance com etapas
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"> |
Faixa com 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> |
Faixa desabilitada
<input type="range" min="0" max="100" value="40" class="range" disabled> |
Faixa com 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 ou outro editor de IA?
Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Faixa e a estrutura sob demanda. Chega de aulas alucinadas.