<p>Audio settings:</p><div>  <input type="range" name="volume" min="0" max="11" />  <label for="volume">Volume</label></div><div>  <input    type="range"       name="cowbell"    min="0"    max="100"    value="90"    step="10" />  <label for="cowbell">Cowbell</label></div>

p,label {  font:    1rem "Fira Sans",    sans-serif;}input {  margin: 0.4rem;}

If the user's browser doesn't support typerange, it will fall back and treat it as atext input.

The value of an<input type="range"> element is set using thevalue attribute which accepts a string representing the selected number. The value is never an empty string (""). 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 themin attribute. The algorithm for determining the default value is:

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

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.

There is no pattern validation available; however, the following forms of automatic validation are performed:

• If thevalue 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.
• The value won't be less thanmin. The default is 0.
• The value won't be greater thanmax. The default is 100.
• The value will be a multiple ofstep. The default is 1.

In addition to the attributes shared by all<input> elements, range inputs offer the following attributes.

The value of thelist attribute is theid of a<datalist> element located in the same document. The<datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with thetype 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.

See theadding tick marks below for an example of how the options on a range are denoted in supported browsers.

The greatest value in the range of permitted values. If thevalue entered into the element exceeds this, the element failsconstraint validation. If the value of themax attribute isn't a number, then the element has no maximum value.

This value must be greater than or equal to the value of themin attribute. See the HTMLmax attribute.

The lowest value in the range of permitted values. If thevalue of the element is less than this, the element failsconstraint validation. If a value is specified formin that isn't a valid number, the input has no minimum value.

This value must be less than or equal to the value of themax attribute. See the HTMLmin attribute.

Thestep attribute is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval (min if specified,value otherwise, or an appropriate default value if neither of those is provided) are valid.

Thestep attribute can also be set to theany string value. Thisstep value means that no stepping interval is implied and any value is allowed in the specified range (barring other constraints, such asmin andmax). See theSetting step to theany value example for how this works in supported browsers.

The default stepping value forrange inputs is 1, allowing only integers to be entered,unless the stepping base is not an integer; for example, if you setmin to -10 andvalue to 1.5, then astep 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 theHTMLstep attribute.

Similar to the -moz-orient non-standard CSS property impacting the<progress> and<meter> elements, theorient attribute defines the orientation of the range slider. Values includehorizontal, meaning the range is rendered horizontally, andvertical, where the range is rendered vertically.

While thenumber 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. Therange 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.

A few examples of situations in which range inputs are commonly used:

• Audio controls such as volume and balance, or filter controls.
• Color configuration controls such as color channels, transparency, brightness, etc.
• Game configuration controls such as difficulty, visibility distance, world size, and so forth.
• Password length for a password manager's generated passwords.

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

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 themin and/ormax attributes. These can be any floating-point value.

For example, to ask the user for a value between -10 and 10, you can use:

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

By default, the granularity is 1, meaning the value is always an integer. To control the granularity, you can change thestep attribute. For example, If you need a value to be halfway between 5 and 10, you should set the value ofstep to 0.5:

Setting the step attribute

<input type="range" min="5" max="10" step="0.5" />

Setting step toany

If you want to accept any value regardless of how many decimal places it extends to, you can specify a value ofany for thestep attribute:

HTML

<input type="range" min="0" max="3.14" step="any" /><p>Value: <output></output></p>

JavaScript

const value = document.querySelector("#value");const input = document.querySelector("#pi_input");value.textContent = input.value;input.addEventListener("input", (event) => {  value.textContent = event.target.value;});

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.

To add tick marks to a range control, include thelist attribute, giving it theid of a<datalist> element which defines a series of tick marks on the control. Each point is represented using an<option> element with itsvalue set to the range's value at which a mark should be drawn.

HTML

<label for="temp">Choose a comfortable temperature:</label><br /><input type="range" name="temp" list="markers" /><datalist>  <option value="0"></option>  <option value="25"></option>  <option value="50"></option>  <option value="75"></option>  <option value="100"></option></datalist>

Result

To help you from repeating code you can reuse that same<datalist> for multiple<input type="range"> elements, and other<input> types.

HTML

<p>  <label for="temp1">Temperature for room 1:</label>  <input type="range" name="temp1" list="values" /></p><p>  <label for="temp2">Temperature for room 2:</label>  <input type="range" name="temp2" list="values" /></p><p>  <label for="temp3">Temperature for room 3:</label>  <input type="range" name="temp3" list="values" /></p><datalist>  <option value="0" label="0"></option>  <option value="25" label="25"></option>  <option value="50" label="50"></option>  <option value="75" label="75"></option>  <option value="100" label="100"></option></datalist>

Result

You can label tick marks by giving the<option> elementslabel 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.

HTML

<label for="tempB">Choose a comfortable temperature:</label><br /><input type="range" name="temp" list="values" /><datalist>  <option value="0" label="very cold!"></option>  <option value="25" label="cool"></option>  <option value="50" label="medium"></option>  <option value="75" label="getting warm!"></option>  <option value="100" label="hot!"></option></datalist>

CSS

datalist {  display: flex;  flex-direction: column;  justify-content: space-between;  writing-mode: vertical-lr;  width: 200px;}option {  padding: 0;}input[type="range"] {  width: 200px;  margin: 0;}

Result

By default, browsers render range inputs as sliders with the knob sliding left and right.

To create a vertical range wherein the thumb slides up and down, set thewriting-mode property with a value of eithervertical-rl orvertical-lr:

<input type="range" min="0" max="10" value="8" />

input[type="range"] {  writing-mode: vertical-lr;}

This causes the range slider to render vertically:

You can also set the CSSappearance property to the non-standardslider-vertical value if you want to support older versions of Chrome and Safari, and include the non-standardorient="vertical" attribute to support older versions of Firefox.

SeeCreating vertical form controls for examples.

• HTML Forms
• <input> and theHTMLInputElement interface it's based upon
• <input type="number">
• validityState.rangeOverflow andvalidityState.rangeUnderflow
• Controlling multiple parameters with ConstantSourceNode
• Creating vertical form controls
• Styling the range element