slider · Casa Hacker DS

overview

01

60

variantes

02

Slider simples

brilho

40

Sem display de valor

estados

03

comportamentos

04

← / → ajustam 1 step
↑ / ↓ ajustam 1 step
Home / End vão pro min / max
PageUp / PageDown ajustam ~10 steps
JS auto-sincroniza .slider-value se presente

modifiers · api

05

prop	tipo	default	descrição
.slider	class	—	wrapper do input
.slider-row	class	—	grid 1fr 80px (slider + valor)
.slider-value	class	—	display do valor atual
min	attr	—	valor mínimo
max	attr	—	valor máximo
step	attr	—	incremento
value	attr	—	valor inicial

quando usar

06

use

Valores contínuos (brilho, volume)
Quando precisão exata não é crítica
Quando visualização do range ajuda (zoom, escala)

não use

Valores discretos pequenos (1-5) — usa radio
Quando precisão é crítica — usa number input
Múltiplos sliders empilhados sem labels

acessibilidade

07 · wcag aa

role="slider" implícito via input[type="range"]
aria-valuemin/max/now implícitos
Funciona 100% via teclado (setas + Home/End/PageUp/Down)
Foco visível com box-shadow no thumb
Sempre acompanhar de label associado

código

08 · html

<div class="slider-row">
  <div class="slider">
    <input type="range" min="0" max="100" value="60">
  </div>
  <div class="slider-value">60</div>
</div>