← Voltar à biblioteca
Formulários

Controle deslizante

Slider / Range

Uma trilha com um marcador que você arrasta para ajustar um valor.

0100

Exemplo didático · Experimente os controles acima

Quando usar

Ajustar valores de uma faixa, como volume, zoom ou intensidade.

Cuidados e acessibilidade

Mostre o valor atual e permita ajuste pelo teclado.

Partes e comportamento

Nome, valor, trilha, marcador, mínimo, máximo e incremento.

Não confunda

Um progress bar informa andamento; um slider recebe um valor escolhido pela pessoa.

Exemplo de código

<label for="volume">Volume</label>
<input id="volume" type="range" min="0" max="100" value="50">

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

BIBLIOTECA UI / EXPLORAR