<input type="range">

Se o navegador do usuário não suportar o tipo "range", este será tratado como um input do tipo "text".

O atributo value contém uma DOMString que conte uma representação dos números selecionados em string. O valor nunca é uma string vazia (""). O valor padrão está entre o mínimo e o máximo especificados, a menos que o valor máximo seja menor que o mínimo, caso em que o padrão é definido como o atributo de valor mínimo. O algoritmo que determina o valor padrão é:

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

Se for feito uma tentativa para definir como máximo um valor inferior ao mínimo, então este é definido como mínimo. Da mesma forma, uma tentativa de definir um valor maior do que o máximo sendo configurado então para o máximo.

Equanto o tipo "number" permite aos usuários inserir um número com restrições opcionais forçando-o a digitar um valor entre o valor mínimo e máximo, ele requer que digitem um valor específico. A input de tipo permite ao usuário que coloque um valor sem que preocupe ou precise saber o valor numério específico.

Alguns exemplos de situações que este tipo são comumente usados são:

• Controle de audio como volume, equilíbrio e ou controle de filtros.
• Controle de configuração de cores como canais de cores, transparência, brilho, etc.
• Controle de configuração de jogos, como dificuldade, distância de visibilidade, tamanho do mundo, entre outros.
• Comprimento de senha gerada por gerenciadores de senha.

Como regra geral, se o usuário tiver maior probabilidade de se interessar por porcentagens entre distâncias mínimas e máximas do que por um número real, este tipo de input é um forte candidato. Por exemplo, no caso de um controle de volume estéreo, "colocar o controlador no meio" em vez de "definir o volume como 0.5".

Por padrão, o mínimo é 0 e o máximo é 100. Se não é o que você precisa, voce pode facilmente especificar limites diferentes alterando os valores dos atributos min e/ou max. Este pode ser um valor inteiro.

Por exemplo, para pedir ao usuário um valor entre -10 e 10, você pode usar:

<input type="range" min="-10" max="10" />

Por padrão, a escala entre o mínimo e o máximo é 1, significando que este sempre é um valor inteiro. você pode alterar o atributo step para controlar esta escala. Por exemplo, se você precisa de um valor de duas casas decimais entre os valores 5 e 10, voce deve definir o valor de step para 0.01:

Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor "any" para o atributo step:

<input type="range" min="0" max="3.14" step="any" />

Este exemplo permite ao usuário selecionar qualquer valor entre 0 e π sem qualquer restrição na parte fracionada do valor selecionado.

As especificações do HTML oferece aos navegadores uma certa flexibilidade sobre como apresentar o controle deslizante. Em parte alguma esta flexibilidade é mais aparente do que no mapeamento de marcas e, menos ainda, na etiqueta. A especificação descreve como adicionar pontos personalizados ao controle usando o atributo list e o elemento <datalist> , mas não tem requisitos nem padronizações para marcações ou mesmo pontos ao longo do controle deslizante.

Modelo de controle do range

Uma vez que os navegadores têm essa flexibilidade e, até à data, nenhum suporte a todos os recursos que o HTML define para controles de alcance, aqui estão alguns modelos para mostrar o que você pode obter no MacOS em um navegador que os suporta.

Um controle sem o atributo

Isto é o que você obtem se não especificar o atributo list , ou se o navegador não oferece suporte.

HTML	Screenshot
html <input type="range">

Um controle com o Atributo

Este controle está usando um atributo list especificando o ID de uma <datalist> que define uma serie de marcações no controle. Há 11 deles, de modo que há um 0% bem como a adição de 10% em cada próximo. Cada ponto representa usando um elemento <option> com propriedade value definido para o valor do intervalo no qual uma marca deve ser desenhada.

HTML	Screenshot
html <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100"> </datalist>

Um controle deslizante com marcas e rótulos

Você pode adicionar rótulos para seu controle usando o atributo label para o elemento <option> correspondente às marcas de marcação para as quais você deseja ter rótulos.

HTML	Screenshot
html <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50" label="50%"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100" label="100%"> </datalist>

Controle de range horizontal

Considerando este controle:

<input type="range" id="volume" min="0" max="11" value="7" step="1" />

Esse controle é horizontal (pelo menos na maioria, senão em todos os principais navegadores, outros podem variar).

Usando a propriedade appearance

A propriedade appearance tem um valor não padrão de slider-vertical que, bem, torna os controles deslizantes verticais.

Usamos o mesmo HTML dos exemplos anteriores:

<input type="range" min="0" max="11" value="7" step="1" />

Visamos apenas as entradas com um tipo de range:

input[type="range"] {
  appearance: slider-vertical;
}

Controle de range vertical

As especificações HTML recomenda que os navegadores mudem automaticamente para um controle vertical quando a largura for menor que à altura. Infortuniamente nenhum dos principais navegadores atualmente oferece tal suporte. No entanto você pode cria-lo pelo seu lado. A maneira mais fácil para isto é usar o CSS: aplicando um: transform para rotacionar o elemento tornando-o vertical. Vamos dar uma olhada:

HTML

No HTML o elemento <input> precisa ser envolto em uma <div> para nos permitir corrigir o layout após a transformação ser executada, (uma vez que as transformações não afetam automaticamente o layout da página):

<div class="slider-wrapper">
  <input type="range" min="0" max="11" value="7" step="1" />
</div>

CSS

Agora precisamos de algum CSS. Primeiro é o CSS para o próprio wrapper; isso especifica o modo de exibição e o tamanho que queremos para que a página seja definida corretamente; em essência, está reservando uma área da página para que o controle deslizante gire e se encaixe no espaço reservado sem bagunçar outros elementos.

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}

Em seguida, vem a informação de estilo para o elemento <input> dentro do espaço reservado:

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

O tamanho do controle está configurado para ter 150 pixels de comprimento por 20 pixels de altura . As margins estão configuradas como 0 e a transform-origin é deslocada para o centro do espaço de giro do controle deslizante; uma vez que o controle deslizante está configurado para ter 150 pixels de largura, gira através de uma caixa que é de 150 pixels em cada lado. Compensando a origem por 75px em cada eixo significa que vamos girar em torno do centro desse espaço. Finalmente, giramos no sentido anti-horário em 90 °. O resultado: uma entrada de intervalo que é girada para que o valor máximo esteja na parte superior e o valor mínimo esteja na parte inferior.

Result

Não há padrões de validação disponível, no entanto, as seguintes formas de validações são realizadas automaticamente:

• Se value estiver definido para algo que não possa ser convertido em um número flutuante válido, a validação falhará porque a entrada está sofrendo de uma entrada incorreta.
• O valor não será inferior há min. O valor padrão é 0.
• O valor não pode ser maior que max. O valor padrão é 100.
• O valor será um multiplo de step. O valor padrão é 1.

Além dos exemplos variados acima, você encontrará as entradas de alcance demonstradas nestes artigos:

• Controlling multiple parameters with ConstantSourceNode

• HTML Forms
• <input> and the HTMLInputElement interface it's based upon
• <input type="number">