path: root/devdocs/html/element%2Finput%2Frange.html

<header><h1>&lt;input type="range"&gt;</h1></header><div class="section-content">
<p><a href="../input"><code>&lt;input&gt;</code></a> elements of type <code>range</code> let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the <a href="number">number</a> input type.</p> <p>Because this kind of widget is imprecise, it should only be used if the control's exact value isn't important.</p>
</div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-range.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>If the user's browser doesn't support type <code>range</code>, it will fall back and treat it as a <code><a href="text">text</a></code> input.</p>
</div>
<h3 id="validation">Validation</h3>
<div class="section-content">
<p>There is no pattern validation available; however, the following forms of automatic validation are performed:</p> <ul> <li>If the <a href="../input#value"><code>value</code></a> is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input.</li> <li>The value won't be less than <a href="../input#min"><code>min</code></a>. The default is 0.</li> <li>The value won't be greater than <a href="../input#max"><code>max</code></a>. The default is 100.</li> <li>The value will be a multiple of <a href="../input#step"><code>step</code></a>. The default is 1.</li> </ul>
</div>
<h3 id="value">Value</h3>
<div class="section-content">
<p>The <a href="../input#value"><code>value</code></a> attribute contains a string which contains a string representation of the selected number. The value is never an empty string (<code>""</code>). The default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the <code>min</code> attribute. The algorithm for determining the default value is:</p> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="s0YJHxSrqtIfl3E7CsMpoqjj0V6S+Q868hUb2UVV41M=" data-language="js">defaultValue <span class="token operator">=</span>
  rangeElem<span class="token punctuation">.</span>max <span class="token operator">&lt;</span> rangeElem<span class="token punctuation">.</span>min
    <span class="token operator">?</span> rangeElem<span class="token punctuation">.</span>min
    <span class="token operator">:</span> rangeElem<span class="token punctuation">.</span>min <span class="token operator">+</span> <span class="token punctuation">(</span>rangeElem<span class="token punctuation">.</span>max <span class="token operator">-</span> rangeElem<span class="token punctuation">.</span>min<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">;</span>
</pre>
</div> <p>If an attempt is made to set the value lower than the minimum, it is set to the minimum. Similarly, an attempt to set the value higher than the maximum results in it being set to the maximum.</p>
</div>
<h2 id="additional_attributes">Additional attributes</h2>
<div class="section-content"><p>In addition to the attributes shared by all <a href="../input"><code>&lt;input&gt;</code></a> elements, range inputs offer the following attributes.</p></div>
<h3 id="list">list</h3>
<div class="section-content">
<p>The value of the <code>list</code> attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code>&lt;datalist&gt;</code></a> element located in the same document. The <a href="../datalist"><code>&lt;datalist&gt;</code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p> <p>See the <a href="#adding_tick_marks">adding tick marks</a> below for an example of how the options on a range are denoted in supported browsers.</p>
</div>
<h3 id="max">max</h3>
<div class="section-content">
<p>The greatest value in the range of permitted values. If the <a href="../input#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <a href="../../attributes/max"><code>max</code></a> attribute isn't a number, then the element has no maximum value.</p> <p>This value must be greater than or equal to the value of the <a href="../../attributes/min"><code>min</code></a> attribute. See the HTML <a href="../../attributes/max"><code>max</code></a> attribute.</p>
</div>
<h3 id="min">min</h3>
<div class="section-content">
<p>The lowest value in the range of permitted values. If the <a href="../input#value"><code>value</code></a> of the element is less than this, the element fails <a href="../../constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid number, the input has no minimum value.</p> <p>This value must be less than or equal to the value of the <a href="../../attributes/max"><code>max</code></a> attribute. See the HTML <a href="../../attributes/min"><code>min</code></a> attribute.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If the <code>min</code> and <code>max</code> values are equal or the <code>max</code> value is lower than the <code>min</code> value the user will not be able to interact with the range.</p> </div>
</div>
<h3 id="step">step</h3>
<div class="section-content">
<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, or an appropriate default value if neither of those is provided) are valid.</p> <p>The <code>step</code> attribute can also be set to the <code>any</code> string value. This <code>step</code> value means that no stepping interval is implied and any value is allowed in the specified range (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>). See the <a href="#setting_step_to_the_any_value">Setting step to the <code>any</code> value</a> example for how this works in supported browsers.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> When the value entered by a user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round off the value to the nearest valid value, preferring to round numbers up when there are two equally close options.</p> </div> <p>The default stepping value for <code>range</code> inputs is 1, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer; for example, if you set <code>min</code> to -10 and <code>value</code> to 1.5, then a <code>step</code> of 1 will allow only values such as 1.5, 2.5, 3.5,… in the positive direction and -0.5, -1.5, -2.5,… in the negative direction. See the <a href="../../attributes/step">HTML <code>step</code> attribute</a>.</p>
</div>
<h2 id="non-standard_attributes">Non-standard Attributes</h2>

<h3 id="orient">orient</h3>
<div class="section-content">
<p>Similar to the -moz-orient non-standard CSS property impacting the <a href="../progress"><code>&lt;progress&gt;</code></a> and <a href="../meter"><code>&lt;meter&gt;</code></a> elements, the <code>orient</code> attribute defines the orientation of the range slider. Values include <code>horizontal</code>, meaning the range is rendered horizontally, and <code>vertical</code>, where the range is rendered vertically.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> The following input attributes do not apply to the input range: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, and <code>src</code>. Any of these attributes, if included, will be ignored.</p> </div>
</div>
<h2 id="examples">Examples</h2>
<div class="section-content">
<p>While the <code>number</code> type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. The <code>range</code> input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is.</p> <p>A few examples of situations in which range inputs are commonly used:</p> <ul> <li>Audio controls such as volume and balance, or filter controls.</li> <li>Color configuration controls such as color channels, transparency, brightness, etc.</li> <li>Game configuration controls such as difficulty, visibility distance, world size, and so forth.</li> <li>Password length for a password manager's generated passwords.</li> </ul> <p>As a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. For example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5".</p>
</div>
<h3 id="specifying_the_minimum_and_maximum">Specifying the minimum and maximum</h3>
<div class="section-content">
<p>By default, the minimum is 0 and the maximum is 100. If that's not what you want, you can easily specify different bounds by changing the values of the <a href="../input#min"><code>min</code></a> and/or <a href="../input#max"><code>max</code></a> attributes. These can be any floating-point value.</p> <p>For example, to ask the user for a value between -10 and 10, you can use:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="61WSkGGyXk8u/sQdktXVjpFi3iZwLrFpdM4kKoHikL4=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-10<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect4">

<iframe class="sample-code-frame" title="Specifying the minimum and maximum sample" id="frame_specifying_the_minimum_and_maximum" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=specifying_the_minimum_and_maximum" loading="lazy"></iframe>
</div>
</div>
<h3 id="setting_the_values_granularity">Setting the value's granularity</h3>
<div class="section-content">
<p>By default, the granularity is 1, meaning the value is always an integer. To control the granularity, you can change the <a href="../input#step"><code>step</code></a> attribute. For example, If you need a value to be halfway between 5 and 10, you should set the value of <code>step</code> to 0.5:</p> <h4 id="setting_the_step_attribute">Setting the step attribute</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="RCETPs5lHxENwLew/431FgB7OdLvdmP5IUb+uLW1s5o=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect5">

<iframe class="sample-code-frame" title="Setting the step attribute sample" id="frame_setting_the_step_attribute" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=setting_the_step_attribute" loading="lazy"></iframe>
</div> <h4 id="setting_step_to_any">Setting step to "any"</h4> <p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the <a href="../input#step"><code>step</code></a> attribute:</p> <h5 id="html">HTML</h5> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="r+ZJhIMO14e+VyMp2xGpbY0SXGIRlBJ6eJpKGHXO7uA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pi_input<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3.14<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>any<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Value: <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>output</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>output</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <h5 id="javascript">JavaScript</h5> <div class="code-example">
<p class="example-header"><span class="language-name">js</span></p>
<pre data-signature="cQHNeG2dtOemQmBYUM3Aj2Ws6K76Cq1Za9GIXIIt810=" data-language="js"><span class="token keyword">const</span> value <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#value"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#pi_input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
value<span class="token punctuation">.</span>textContent <span class="token operator">=</span> input<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  value<span class="token punctuation">.</span>textContent <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</pre>
</div>
<div class="code-example" id="sect6">

<iframe class="sample-code-frame" title="Setting step to any sample" id="frame_setting_step_to_any" width="600" height="75" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=setting_step_to_any" loading="lazy"></iframe>
</div> <p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected. JavaScript is used to show how the value changes as the user interacts with the range.</p>
</div>
<h3 id="adding_tick_marks">Adding tick marks</h3>
<div class="section-content">
<p>To add tick marks to a range control, include the <code>list</code> attribute, giving it the <code>id</code> of a <a href="../datalist"><code>&lt;datalist&gt;</code></a> element which defines a series of tick marks on the control. Each point is represented using an <a href="../option"><code>&lt;option&gt;</code></a> element with its <a href="../option#value"><code>value</code></a> set to the range's value at which a mark should be drawn.</p> <h4 id="html_2">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="MruCcANpMskjStC9xQAVNxzQ1EFSqQDDrTDn+HYcdsY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Choose a comfortable temperature:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>markers<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>markers<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>datalist</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <h4 id="result">Result</h4>
<div class="code-example" id="sect7">

<iframe class="sample-code-frame" title="Adding tick marks sample" id="frame_adding_tick_marks" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=adding_tick_marks" loading="lazy"></iframe>
</div>
</div>
<h3 id="using_the_same_datalist_for_multiple_range_controls">Using the same datalist for multiple range controls</h3>
<div class="section-content">
<p>To help you from repeating code you can reuse that same <a href="../datalist"><code>&lt;datalist&gt;</code></a> for multiple <code>&lt;input type="range"&gt;</code> elements, and other <a href="../input"><code>&lt;input&gt;</code></a> types.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> If you also want to <a href="#adding_labels">show the labels</a> as in the example below then you would need a <code>datalist</code> for each range input.</p> </div> <h4 id="html_3">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="EfTIISSTx0DO++c8Qzmr2pGJUk6zze1FdEt8NCE6dwg=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Temperature for room 1:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp1<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp2<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Temperature for room 2:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp2<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp3<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Temperature for room 3:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp3<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp3<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>datalist</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <h4 id="result_2">Result</h4>
<div class="code-example" id="sect9">

<iframe class="sample-code-frame" title="Using the same datalist for multiple range controls sample" id="frame_using_the_same_datalist_for_multiple_range_controls" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=using_the_same_datalist_for_multiple_range_controls" loading="lazy"></iframe>
</div>
</div>
<h3 id="adding_labels">Adding labels</h3>
<div class="section-content">
<p>You can label tick marks by giving the <code>&lt;option&gt;</code> elements <code>label</code> attributes. However, the label content will not be displayed by default. You can use CSS to show the labels and to position them correctly. Here's one way you could do this.</p> <h4 id="html_4">HTML</h4> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="r//H/j3KZ8Q137NLCpekHOAWBCqMxHrtrKaqIKdKfBs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tempB<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Choose a comfortable temperature:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tempB<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>temp<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>values<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>very cold!<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cool<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getting warm!<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hot!<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>datalist</span><span class="token punctuation">&gt;</span></span>
</pre>
</div> <h4 id="css">CSS</h4> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="4YiKFCF1vnbAmSqlnYxHLlwg2qZL6+e/h3001DS/OUg=" data-language="css"><span class="token selector">datalist</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
  <span class="token property">writing-mode</span><span class="token punctuation">:</span> vertical-lr<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">option</span> <span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">input[type="range"]</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div> <h4 id="result_3">Result</h4>
<div class="code-example" id="sect10">

<iframe class="sample-code-frame" title="Adding labels sample" id="frame_adding_labels" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=adding_labels" loading="lazy"></iframe>
</div>
</div>
<h3 id="creating_vertical_range_controls">Creating vertical range controls</h3>
<div class="section-content">
<p>By default, browsers render range inputs as sliders with the knob sliding left and right.</p> <p>To create a vertical range, wherein the knob slides up and down, set the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property to <code>slider-vertical</code> and include the non-standard <code>orient</code> attribute for Firefox.</p> <h4 id="horizontal_range_control">Horizontal range control</h4> <p>Consider this range control:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="PZmCPbB1GsVAASr2aRI0j1y/EPHrOJFK5+C6t8t6vxs=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect11">

<iframe class="sample-code-frame" title="Horizontal range control sample" id="frame_horizontal_range_control" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=horizontal_range_control" loading="lazy"></iframe>
</div> <p>This control is horizontal (at least on most if not all major browsers; others might vary).</p> <h4 id="using_the_appearance_property">Using the appearance property</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance"><code>appearance</code></a> property has a non-standard value of <code>slider-vertical</code> that, well, makes sliders vertical.</p> <p>We use the same HTML as in the previous examples:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="RahzzulggSYi1Ost/ooaNF6DCMPtuVUjJ2Fd3DEpD/w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div> <p>We target just the inputs with a type of range:</p> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="TFcTUtS3OJ5oP8mZkRuL7LxeM2YjSv8gSi/N0Iphmbg=" data-language="css"><span class="token selector">input[type="range"]</span> <span class="token punctuation">{</span>
  <span class="token property">appearance</span><span class="token punctuation">:</span> slider-vertical<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div>
<div class="code-example" id="sect12">

<iframe class="sample-code-frame" title="Using the appearance property sample" id="frame_using_the_appearance_property" width="200" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=using_the_appearance_property" loading="lazy"></iframe>
</div> <h4 id="using_the_orient_attribute">Using the orient attribute</h4> <p>In Firefox only, there is a non-standard <code>orient</code> property.</p> <p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="Dln5U7nm8y1vVFMTpVJFoc87O4j/ydMQrAX4BlpttQ8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">orient</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div>
<div class="code-example" id="sect13">

<iframe class="sample-code-frame" title="Using the orient attribute sample" id="frame_using_the_orient_attribute" width="200" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=using_the_orient_attribute" loading="lazy"></iframe>
</div> <h4 id="writing-mode_bt-lr">writing-mode: bt-lr</h4> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode"><code>writing-mode</code></a> property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects.</p> <p>We use the same HTML as in the previous examples:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="RahzzulggSYi1Ost/ooaNF6DCMPtuVUjJ2Fd3DEpD/w=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div> <p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="sBW+AMa57Jt1O9yXtadvV8QWXxJVW3pTtdxz2mRn1A0=" data-language="css"><span class="token selector">input[type="range"]</span> <span class="token punctuation">{</span>
  <span class="token property">writing-mode</span><span class="token punctuation">:</span> bt-lr<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div>
<div class="code-example" id="sect14">

<iframe class="sample-code-frame" title="writing-mode bt-lr sample" id="frame_writing-mode_bt-lr" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=writing-mode_bt-lr" loading="lazy"></iframe>
</div> <h4 id="putting_it_all_together">Putting it all together</h4> <p>As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser:</p> <p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p> <div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="Dln5U7nm8y1vVFMTpVJFoc87O4j/ydMQrAX4BlpttQ8=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">orient</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
</pre>
</div> <p>We target just the <code>input</code>s with a <code>type</code> of <code>range</code> and <code>orient</code> set to <code>vertical</code>, changing the <code>writing-mode</code> from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for pre-Blink versions of Edge, and add <code>appearance: slider-vertical</code> which is supported in Blink and Webkit browsers:</p> <div class="code-example">
<p class="example-header"><span class="language-name">css</span></p>
<pre data-signature="uqTcM2RazaWjFY4wqrabir4SdK2PHCYdl5ICo+++lMc=" data-language="css"><span class="token selector">input[type="range"][orient="vertical"]</span> <span class="token punctuation">{</span>
  <span class="token property">writing-mode</span><span class="token punctuation">:</span> bt-lr<span class="token punctuation">;</span>
  <span class="token property">appearance</span><span class="token punctuation">:</span> slider-vertical<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre>
</div>
<div class="code-example" id="sect15">

<iframe class="sample-code-frame" title="Putting it all together sample" id="frame_putting_it_all_together" width="200" height="200" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/range/runner.html?id=putting_it_all_together" loading="lazy"></iframe>
</div>
</div>
<h2 id="technical_summary">Technical summary</h2>
<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Value</a></strong></td> <td> A string containing the string representation of the selected numeric value; use <a class="page-not-created"><code>valueAsNumber</code></a> to get the value as a number. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#max"><code>max</code></a>, <a href="../input#min"><code>min</code></a>, and <a href="../input#step"><code>step</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td>
<code>list</code>, <code>value</code>, and <code>valueAsNumber</code>
</td> </tr> <tr> <td><strong>DOM interface</strong></td> <td> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></p> </td> </tr> <tr> <td><strong>Methods</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role">slider</a></code></td> </tr> </tbody> </table></div></figure></div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#range-state-(type=range)">HTML Standard <br><small># range-state-(type=range)</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>range</code></th>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">23</td>
<td class="bc-supports-yes">10</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">3.1</td>
<td class="bc-supports-yes">4.4<details><summary>2–4.4</summary>Pre-Chromium Android WebView recognizes the <code>range</code> type, but doesn't implement a range-specific control.</details>
</td>
<td class="bc-supports-yes">57</td>
<td class="bc-supports-yes">52</td>
<td class="bc-supports-yes">11</td>
<td class="bc-supports-yes">5</td>
<td class="bc-supports-yes">7.0</td>
</tr>
<tr>
<th><code>tick_marks</code></th>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">≤79</td>
<td class="bc-supports-yes">109</td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">12.1</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">109</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">12.2</td>
<td class="bc-supports-yes">Yes</td>
</tr>
<tr>
<th><code>vertical_orientation</code></th>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
<td class="bc-supports-yes"><details><summary>12</summary>The slider can be oriented vertically by setting the <code>writing-mode: bt-lr</code> style on the <code>input</code> element.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes"><details><summary>10</summary>The slider can be oriented vertically by setting the <code>writing-mode: bt-lr</code> style on the <code>input</code> element.</details></td>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
<td class="bc-supports-no">No</td>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
<td class="bc-supports-yes"><details><summary>Yes</summary>The slider can be oriented vertically by setting the non-standard <code>-webkit-appearance: slider-vertical</code> style on the <code>input</code> element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.</details></td>
</tr>
</tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML Forms</a></li> <li>
<a href="../input"><code>&lt;input&gt;</code></a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> interface it's based upon</li> <li><a href="number"><code>&lt;input type="number"&gt;</code></a></li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a>
</li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input/" target="_blank">Styling the range element</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> </ul></div><div class="_attribution">
  <p class="_attribution-p">
    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range</a>
  </p>
</div>