Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

<input> elementos do tipo "range" deixam o usuário especificar um valor numérico que não deve ser inferior a um determinado valor, e não mais do que um valor máximo especificado. O valor preciso, no entanto, não é considerado importante. Este geralmente é representado por um controle deslizante ou o mesmo tipo de controle de "number" input. Como este tipo de elemento é impreciso, não deve ser usado a menos que o valor exato do controle não seja importante.

<input type="range">

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

Value Uma DOMString contendo a a string que reprenta o valor numérico escolhido; use valueAsNumber para pegar o valor como um Number.
Events change e input
Supported Common Attributes autocomplete, list, max, min, e step
IDL attributes list, value, e valueAsNumber
Methods stepDown() e stepUp()

Value

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.

Usando range inputs

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".

Especificando o mínimo e o máximo

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">

Definindo a escala entre valores

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:

<input type="range" min="5" max="10" step="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.

Adicionando marcas de mapeamento e etiquetas

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
<input type="range">
Screenshot of a plain slider control on macOS
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
<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>
Screenshot of a plain slider control on macOS
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
<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>
Screenshot of a plain slider control on macOS

Nota: Atualmente nenhum navegador suporta estes recursos totalmente. Firefox não suporta pontos e rótulos, por exemplo, enquanto o Chrome suporta as marcações de pontos, porém não suporta as etiquetas.

Change the orientation

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

ScreenshotLive sample

Validação

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.

Exemplos

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

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<input type="range">' in that specification.
Padrão em tempo real Initial definition
HTML 5.1
The definition of '<input type="range">' in that specification.
Recomendação Initial definition

Browser compatibility

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0[2] 12 23 (23)[1][4] 10 10.1 3.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1[3] 57[2] (Yes) 52.0 (52)[1] 10 (Yes) 5.1

[1] While the specification says that the range input should be drawn vertically if the height is greater than the width, this behavior is not currently implemented. See these Firefox bugs for more information: bug 840820 and bug 981916.

[2] Chrome implements the slider-vertical value for the non-standard -webkit-appearance property. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.

[3] The Android browser recognizes the "range" type starting with version 2.1, but doesn't fully implement it until version 4.3.

[4] Drawing of hash/tick marks is not yet implemented. See bug 841942 for more information.

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: Humberto, TecladistaProd
Última atualização por: Humberto,