path: root/files/pt-br/web/html/element/input/range/index.html

---
title: <input type="range">
slug: Web/HTML/Element/Input/range
translation_of: Web/HTML/Element/input/range
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">{{HTMLElement("input")}} elementos do tipo <code><strong>"range"</strong></code> 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. </span>Como este tipo de elemento é impreciso, não deve ser usado a menos que o valor exato do controle não seja importante.</p>

<div id="summary_sample1">
<pre class="brush: html">&lt;input type="range"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary_sample1", 600, 40)}}</p>

<p>Se o navegador do usuário não suportar o tipo <code>"range"</code>, este será tratado como um input do tipo <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code>.</p>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Value")}}</strong></td>
   <td>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")}}.</td>
  </tr>
  <tr>
   <td><strong>Events</strong></td>
   <td>{{event("change")}} e {{event("input")}}</td>
  </tr>
  <tr>
   <td><strong>Supported Common Attributes</strong></td>
   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, e {{htmlattrxref("step", "input")}}</td>
  </tr>
  <tr>
   <td><strong>IDL attributes</strong></td>
   <td><code>list</code>, <code>value</code>, e <code>valueAsNumber</code></td>
  </tr>
  <tr>
   <td><strong>Methods</strong></td>
   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} e {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Value">Value</h2>

<p>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 (<code>""</code>). 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 é:</p>

<pre class="brush: js">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>

<p>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, <span id="result_box" lang="pt"><span>uma tentativa de definir um valor maior do que o máximo sendo configurado então para o máximo.</span></span></p>

<h2 id="Usando_range_inputs">Usando range inputs</h2>

<p>Equanto o tipo <code>"number"</code> 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.</p>

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

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

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

<h3 id="Especificando_o_mínimo_e_o_máximo">Especificando o mínimo e o máximo</h3>

<p>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.</p>

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

<pre class="brush: html">&lt;input type="range" min="-10" max="10"&gt;</pre>

<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p>

<h3 id="Definindo_a_escala_entre_valores">Definindo a escala entre valores</h3>

<p>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 <code>step</code> para 0.01:</p>

<div id="Granularity_sample1">
<pre class="brush: html">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>

<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p>
</div>

<p>Se você deseja aceitar um valor independente das casas decimais, voce pode especificar o valor <code>"any"</code> para o atributo {{htmlattrxref("step", "input")}}:</p>

<div id="Granularity_sample2">
<pre class="brush: html">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>

<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p>

<p><span id="result_box" lang="pt"><span>Este exemplo permite ao usuário selecionar qualquer valor entre 0 e π sem qualquer restrição na parte fracionada do valor selecionado.</span></span></p>
</div>

<h3 id="Adicionando_marcas_de_mapeamento_e_etiquetas">Adicionando marcas de mapeamento e etiquetas</h3>

<p>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. <span id="result_box" lang="pt"><span>A especificação descreve como adicionar pontos personalizados ao controle</span></span> 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.</p>

<h4 id="Modelo_de_controle_do_range">Modelo<span class="short_text" id="result_box" lang="pt"><span> de controle</span></span> do range</h4>

<p><span id="result_box" lang="pt"><span>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.</span></span></p>

<h5 id="Um_controle_sem_o_atributo">Um controle sem o atributo</h5>

<p>Isto é o que você obtem se não especificar o atributo {{htmlattrxref("list", "input")}} , ou se o navegador não oferece suporte.</p>

<table class="fullwidth standard-table">
 <tbody>
  <tr>
   <th>HTML</th>
   <th>Screenshot</th>
  </tr>
  <tr>
   <td>
    <pre class="brush: html">
&lt;input type="range"&gt;</pre>
   </td>
   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td>
  </tr>
 </tbody>
</table>

<h5 id="Um_controle_com_o_Atributo">Um controle com o Atributo</h5>

<p>Este controle está usando um atributo <code>list</code> <span class="short_text" id="result_box" lang="pt"><span>especificando o ID de um</span></span>a {{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")}} <span id="result_box" lang="pt"><span> definido para o valor do intervalo no qual uma marca deve ser desenhada.</span></span></p>

<table class="fullwidth standard-table">
 <tbody>
  <tr>
   <th>HTML</th>
   <th>Screenshot</th>
  </tr>
  <tr>
   <td>
    <pre class="brush: html">
&lt;input type="range" list="tickmarks"&gt;

&lt;datalist id="tickmarks"&gt;
  &lt;option value="0"&gt;
  &lt;option value="10"&gt;
  &lt;option value="20"&gt;
  &lt;option value="30"&gt;
  &lt;option value="40"&gt;
  &lt;option value="50"&gt;
  &lt;option value="60"&gt;
  &lt;option value="70"&gt;
  &lt;option value="80"&gt;
  &lt;option value="90"&gt;
  &lt;option value="100"&gt;
&lt;/datalist&gt;
</pre>
   </td>
   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td>
  </tr>
 </tbody>
</table>

<h5 id="Um_controle_deslizante_com_marcas_e_rótulos">Um controle deslizante com marcas e rótulos</h5>

<p>Você pode adicionar rótulos para seu controle usando o atributo {{htmlattrxref("label", "option")}} para o elemento {{HTMLElement("option")}} <span id="result_box" lang="pt"><span>correspondente às marcas de marcação para as quais você deseja ter rótulos.</span></span></p>

<table class="fullwidth standard-table">
 <tbody>
  <tr>
   <th>HTML</th>
   <th>Screenshot</th>
  </tr>
  <tr>
   <td>
    <pre class="brush: html">
&lt;input type="range" list="tickmarks"&gt;

&lt;datalist id="tickmarks"&gt;
  &lt;option value="0" label="0%"&gt;
  &lt;option value="10"&gt;
  &lt;option value="20"&gt;
  &lt;option value="30"&gt;
  &lt;option value="40"&gt;
  &lt;option value="50" label="50%"&gt;
  &lt;option value="60"&gt;
  &lt;option value="70"&gt;
  &lt;option value="80"&gt;
  &lt;option value="90"&gt;
  &lt;option value="100" label="100%"&gt;
&lt;/datalist&gt;
</pre>
   </td>
   <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota</strong>: 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.</p>
</div>

<h3 id="Change_the_orientation">Change the orientation</h3>

<div class="hidden">
<p>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.</p>

<div class="note">
<p><strong>Nota</strong>: <span id="result_box" lang="pt"><span>Isso ainda não foi implementado por nenhum dos principais navegadores.</span> <span>Veja o Firefox</span></span> {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>.</p>
</div>

<p>Considerando este controle:</p>

<div id="Orientation_sample1">
<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
</div>

<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p>

<p><span id="result_box" lang="pt"><span>Esse controle é horizontal (pelo menos na maioria, senão em todos os principais navegadores, outros podem variar).</span> <span>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:</span></span> </p>

<div id="Orientation_sample2">
<h4 id="CSS">CSS</h4>

<pre class="brush: css">#volume {
  height: 150px;
  width: 50px;
}</pre>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>

<h4 id="Resultado">Resultado</h4>

<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p>

<p><strong><span id="result_box" lang="pt"><span>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.</span></span> </strong></p>
</div>
</div>

<p>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:</p>

<div id="Orientation_sample3">
<h4 id="HTML_2">HTML</h4>

<p>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, <span id="result_box" lang="pt"><span>(uma vez que as transformações não afetam automaticamente o layout da página):</span></span></p>

<pre class="brush: html">&lt;div class="slider-wrapper"&gt;
  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<p><span id="result_box" lang="pt"><span>Agora precisamos de algum CSS.</span> <span>Primeiro é o CSS para o próprio wrapper;</span> <span>isso especifica o modo de exibição e o tamanho que queremos para que a página seja definida corretamente;</span> <span>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.</span></span></p>

<pre class="brush: css">.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
</pre>
<span id="result_box" lang="pt"><span>Em seguida, vem a informação de estilo para o elemento </span></span><code>&lt;input&gt;</code> <span id="result_box" lang="pt"><span>dentro do espaço reservado:</span></span>

<pre class="brush: css">.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}</pre>

<p><span id="result_box" lang="pt"><span>O tamanho do controle está configurado para ter 150 pixels de comprimento por 20 pixels de altura</span></span> . As margins estão configuradas como 0 e a {{cssxref("transform-origin")}} é deslocada para o centro do espaço de giro do controle deslizante;<span id="result_box" lang="pt"><span> 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.</span> <span>Compensando a origem por 75px em cada eixo significa que vamos girar em torno do centro desse espaço.</span> <span>Finalmente, giramos no sentido anti-horário em 90 °.</span> <span>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.</span></span></p>

<h4 id="Result">Result</h4>

<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p>
</div>

<h2 id="Validação">Validação</h2>

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

<ul>
 <li>Se {{htmlattrxref("value", "input")}} estiver definido para algo que não possa ser convertido em um número flutuante válido, <span id="result_box" lang="pt"><span>a validação falhará porque a entrada está sofrendo de uma entrada incorreta.</span></span></li>
 <li>O valor não será inferior há {{htmlattrxref("min", "input")}}. O valor padrão é 0.</li>
 <li>O valor não pode ser maior que {{htmlattrxref("max", "input")}}. O valor padrão é 100.</li>
 <li>O valor será um multiplo de {{htmlattrxref("step", "input")}}. O valor padrão é 1.</li>
</ul>

<h2 id="Exemplos">Exemplos</h2>

<p><span id="result_box" lang="pt"><span>Além dos exemplos variados acima, você encontrará as entradas de alcance demonstradas nestes artigos:</span></span></p>

<ul>
 <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li>
</ul>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Initial definition</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>4.0<sup>[2]</sup></td>
   <td>12</td>
   <td>{{CompatGeckoDesktop(23)}}<sup>[1][4]</sup></td>
   <td>10</td>
   <td>10.1</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.1<sup>[3]</sup></td>
   <td>57<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td>
   <td>10</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>5.1</td>
  </tr>
 </tbody>
</table>
</div>

<p>[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)}}.</p>

<p>[2] Chrome implements the <code>slider-vertical</code> value for the non-standard {{cssxref("-webkit-appearance")}} property. <em>You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers</em>.</p>

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

<p>[4] Drawing of hash/tick marks is not yet implemented. See {{bug(841942)}} for more information.</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li>
 <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li>
 <li><code><a href="/en-US/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
</ul>