<input type="range">
{{HTMLElement("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">
{{EmbedLiveSample("summary_sample1", 600, 40)}}
Se o navegador do usuário não suportar o tipo "range", este será tratado como um input do tipo "text".
| {{anch("Value")}} | Uma {{domxref("DOMString")}} contendo a a string que representa o valor numérico escolhido; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} para pegar o valor como um {{jsxref("Number")}}. |
| Events | {{event("change")}} e {{event("input")}} |
| Supported Common Attributes | {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, e {{htmlattrxref("step", "input")}} |
| IDL attributes | list, value, e valueAsNumber |
| Methods | {{domxref("HTMLInputElement.stepDown", "stepDown()")}} e {{domxref("HTMLInputElement.stepUp", "stepUp()")}} |
O atributo {{htmlattrxref("value", "input")}} contém uma {{domxref("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:
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 {{htmlattrxref("min", "input")}} e/ou {{htmlattrxref("max", "input")}}. 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">
{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}
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 {{htmlattrxref("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">
{{EmbedLiveSample("Granularity_sample1", 600, 40)}}
Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor "any" para o atributo {{htmlattrxref("step", "input")}}:
<input type="range" min="0" max="3.14" step="any">
{{EmbedLiveSample("Granularity_sample2", 600, 40)}}
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 {{htmlattrxref("list", "input")}} e o elemento {{HTMLElement("datalist")}} , mas não tem requisitos nem padronizações para marcações ou mesmo pontos ao longo do controle deslizante.
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.
Isto é o que você obtem se não especificar o atributo {{htmlattrxref("list", "input")}} , ou se o navegador não oferece suporte.
| HTML | Screenshot |
|---|---|
<input type="range"> |
|
Este controle está usando um atributo list especificando o ID de uma {{HTMLElement("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 {{HTMLElement("option")}} com propriedade {{htmlattrxref("value", "option")}} 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> |
 |
Você pode adicionar rótulos para seu controle usando o atributo {{htmlattrxref("label", "option")}} para o elemento {{HTMLElement("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> |
 |
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.
Por padrão se um navegador renderiza um controle deslizante de intervalos, este renderizará para que o controlador seja movimento da esquerda pra direita e o contrário também. No entanto isto pode ser facilmente mudado de cima para baixo e vice-versa utilizando CSS.
Nota: Isso ainda não foi implementado por nenhum dos principais navegadores. Veja o Firefox {{bug(981916)}}, Chrome bug 341071.
Considerando este controle:
<input type="range" id="volume" min="0" max="11" value="7" step="1">
{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}
Esse controle é horizontal (pelo menos na maioria, senão em todos os principais navegadores, outros podem variar). Fazê-lo vertical é tão simples como adicionar CSS para alterar as dimensões do controle para que ele seja mais alto que o largo, como este:
#volume {
height: 150px;
width: 50px;
}
<input type="range" id="volume" min="0" max="11" value="7" step="1">
{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}
Atualmente, nenhum dos principais navegadores suporta a criação de entradas de alcance vertical usando o CSS desta maneira, mesmo que seja a maneira como a especificação recomenda que eles o façam.
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: {{cssxref("transform")}} para rotacionar o elemento tornando-o vertical. Vamos dar uma olhada:
No HTML o elemento {{HTMLElement("input")}} precisa ser envolto em uma {{HTMLElement("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>
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 {{cssxref("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.
{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}
Não há padrões de validação disponível, no entanto, as seguintes formas de validações são realizadas automaticamente:
Além dos exemplos variados acima, você encontrará as entradas de alcance demonstradas nestes artigos:
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}} | {{Spec2('HTML WHATWG')}} | Initial definition |
| {{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}} | {{Spec2('HTML5.1')}} | Initial definition |
{{CompatibilityTable}}
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 4.0[2] | 12 | {{CompatGeckoDesktop(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] | {{CompatVersionUnknown}} | {{CompatGeckoMobile(52)}}[1] | 10 | {{CompatVersionUnknown}} | 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 {{cssxref("-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.
<input type="number">