Slider range HTML: min, max, step, valor em tempo real e redefinição

HTML input type="range" permite escolher um número dentro de um intervalo com um controle deslizante. Defina limites e passo com min, max e step, e o valor inicial com value. É adequado para ajustes relativos, como volume e brilho. Para mostrar o número atual, use um elemento de saída e JavaScript.

Entenda o intervalo e os padrões

Um campo de entrada do tipo 'range' não possui valor vazio. Omitir o valor não significa "ainda não selecionado", e 'required' não se aplica. Se for importante saber se uma escolha em uma pesquisa foi feita explicitamente, considere escolhas explícitas ou outro método de entrada.

Os passos são calculados a partir de uma base. Por exemplo, min="16" max="32" step="2" permite 16, 18, 20, até 32. Os navegadores podem normalizar um valor inicial fora do intervalo ou do passo, então verifique se o valor atual real corresponde ao padrão desejado.

Exemplo completo: alterar o tamanho da fonte ao vivo

Salve este código como range.html e abra-o em um navegador. Nenhum servidor ou biblioteca é necessário. O controle deslizante altera o tamanho da fonte de uma frase de exemplo de 16 a 32 px em passos de 2 px, e o envio exibe os dados reais do formulário em vez de enviá-los.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ajustar o tamanho com range</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Ajustar o tamanho do texto</h1>
  <form id="demo">
    <label for="fontSize">Tamanho de exemplo (16–32 px, passos de 2 px)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>Tamanho atual: <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">Mostrar valores enviados</button>
      <button type="reset">Redefinir</button></p>
  </form>
  <p id="preview">Mover o controle deslizante altera o tamanho desta frase.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. Inicialmente, o tamanho exibido é 20 px e a pré-visualização usa esse tamanho. Envie para ver a string "20" sob o nome fontSize.
2. Mova o controle deslizante com o ponteiro e verifique se o número e o tamanho da fonte atualizam juntos. Use Tab para alcançá-lo e experimente também as teclas de seta.
3. Por exemplo, um passo da seta direita muda 20 para 22: a exibição se torna 22 e o tamanho da fonte 22 px. O envio agora mostra "22".
4. O reset retorna o controle deslizante, o número e o tamanho da pré-visualização para 20. O manipulador de reset agenda a atualização para o próximo quadro, assim ele lê o valor após o reset nativo ter efeito.

O exemplo usa input para atualizar imediatamente durante o ajuste. Para processar um ajuste confirmado, considere change. Os eventos diferem no momento e no propósito; escolha conforme a necessidade de uma prévia em tempo real.

Distinguir valores atuais, enviados e iniciais

slider.value é o número atual como uma string; slider.valueAsNumber é numérico. O atributo value do HTML é o valor inicial: mover o controle deslizante não muda essa string do atributo. Leia o valor atual do elemento para exibir ou salvar.

output exibe um resultado calculado ou selecionado; ele não substitui um campo de formulário enviado. O exemplo envia a entrada do intervalo nomeado. O armazenamento real no servidor exige uma rota existente e o tratamento da requisição, além da validação do intervalo e do passo no lado do servidor.

Escolha entre intervalo e número e verifique a exibição

Se os usuários precisarem inserir uma quantidade, valor ou comprimento precisos, considere as configurações de entrada de número, intervalo e passo . Deslizadores ajustam rapidamente um nível aproximado, mas selecionar um número exato pode ser difícil em telas estreitas. Quando a precisão é necessária, uma entrada numérica sincronizada pode acompanhar o deslizante.

accent-color pode alterar a cor de destaque do controle deslizante nativo. Isso não necessariamente colore todas as partes de forma idêntica, e a aparência varia conforme o navegador e o sistema operacional. Verifique a largura em dispositivos móveis, espaço adequado para interação, associação de rótulos, foco do teclado e a exibição numérica em conjunto.

A referência de range na MDN explica os valores padrão e o suporte aos atributos.