CONTAINER · stable
#Range (fill automático + steps)
Range (fill automático + steps), preservado do laboratório original e isolado para uso e teste independente.
HTML e exemplo
<div class="sc-card sc-card-outline" style="display:grid; gap:14px;">
<label class="doc-muted" style="margin:0;">Volume</label>
<input class="sc-range" type="range" min="0" max="100" value="35" aria-label="Volume">
<label class="doc-muted" style="margin:0;">Progresso (steps)</label>
<input class="sc-range sc-range-steps" type="range" min="0" max="100" value="60" aria-label="Progresso">
</div><div class="doc-muted" style="margin: 18px 0 10px;"><span class="sc-badge">Extra</span> Range expressivo (theme-aware)</div><div class="sc-card sc-card-outline" style="display:grid; gap:16px;">
<input class="sc-range sc-range-kawaii" type="range" min="1" max="20" value="7" aria-label="Controle de intensidade 1">
<input class="sc-range sc-range-kawaii" style="--sc-range-base:#f17a42;" type="range" min="1" max="20" value="4" aria-label="Controle de intensidade 2">
<input class="sc-range sc-range-kawaii" style="--sc-range-base:#9b3d19;" type="range" min="1" max="20" value="12" aria-label="Controle de intensidade 3">
</div>Classes, JavaScript e API
Não exige inicialização. Classes e atributos semânticos são suficientes.
- Plugin
- CSS-first
- Dependências
- Nenhuma
- Desde
- 0.1.0
Acessibilidade, teclado e movimento
- Foco visível e ordem de leitura preservados.
- Rótulos acessíveis devem acompanhar controles sem texto.
- O conteúdo mantém ordem de leitura e foco visível nos elementos acionáveis.
Não depende de movimento contínuo.
Temas e responsividade
Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.
As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.