Our volunteers haven't translated this article into Català yet. Join us and help get the job done!
You can also read the article in English (US).
<input>
elements of type range
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 number input type. Because this kind of widget is imprecise, it shouldn't typically be used unless the control's exact value isn't important.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
If the user's browser doesn't support type range
, it will fall back and treat it as a text
input.
Value | A DOMString containing the string representation of the selected numeric value; use valueAsNumber to get the value as a Number . |
Events | change and input |
Supported common attributes | autocomplete , list , max , min , and step |
IDL attributes | list , value , and valueAsNumber |
Methods | stepDown() and stepUp() |
Value
The value
attribute contains a DOMString
which contains a string representation of 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 the min
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.
Additional attributes
In addition to the attributes shared by all <input>
elements, range inputs offer the following attributes:
Attribute | Description |
---|---|
max |
The maximum permitted value |
min |
The minimum permitted value |
step |
The stepping interval, used both for user interface and validation purposes |
max
The greatest value in the range of permitted values. If the value
entered into the element exceeds this, the element fails constraint validation. If the value of the max
attribute isn't a number, then the element has no maximum value.
This value must be greater than or equal to the value of the min
attribute.
min
The lowest value in the range of permitted values. If the value
of the element is less than this, the element fails constraint validation. If a value is specified for min
that isn't a valid number, the input has no minimum value.
This value must be less than or equal to the value of the max
attribute.
step
The step
attribute is a number that specifies the granularity that the value must adhere to, or the special value any
, which is described below. Only values which are equal to the basis for stepping (min
if specified, value
otherwise, and an appropriate default value if neither of those is provided) are valid.
A string value of any
means that no stepping is implied, and any value is allowed (barring other constraints, such as min
and max
).
Note: When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.
The default stepping value for range
inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer; for example, if you set min
to -10 and value
to 1.5, then a step
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.
Using range inputs
While the number
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 range
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".
Specifying the minimum and maximum
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 min
and/or max
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">
Setting the value's granularity
By default, the granularity, is 1, meaning that the value is always an integer. You can change the step
attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step
to 0.01:
<input type="range" min="5" max="10" step="0.01">
If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any
for the step
attribute:
<input type="range" min="0" max="3.14" step="any">
This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.
Adding hash marks and labels
The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the list
attribute and a <datalist>
element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.
Range control mockups
Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.
An unadorned range control
This is what you get if you don't specify a list
attribute, or if the browser doesn't support it.
HTML | Screenshot |
---|---|
<input type="range"> |
![]() |
A range control with hash marks
This range control is using a list
attribute specifying the ID of a <datalist>
which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an <option>
element with its value
set to the range's value at which a mark should be drawn.
HTML | Screenshot |
---|---|
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100"> </datalist> |
![]() |
A range control with hash marks and labels
You can add labels to your range control by adding the label
attribute to the <option>
elements corresponding to the tick marks you wish to have labels for.
HTML | Screenshot |
---|---|
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50" label="50%"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100" label="100%"> </datalist> |
![]() |
Note: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the <datalist>
tag has to be styled with CSS as its display
property is set to none
by default, hiding the labels.
Change the orientation
By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. You can, however, easily change this to slide up and down instead using CSS.
Note: This is not actually implemented yet by any of the major browsers. See Firefox bug 981916, Chrome bug 341071.
Consider this range control:
<input type="range" id="volume" min="0" max="11" value="7" step="1">
Screenshot | Live sample |
---|---|
![]() |
This control is horizontal (at least on most if not all major browers; others might vary). Making it vertical is as simple as adding CSS to change the dimensions of the control so that it's taller than it is wide, like this:
CSS
#volume { height: 150px; width: 50px; }
HTML
<input type="range" id="volume" min="0" max="11" value="7" step="1">
Result
Screenshot | Live sample |
---|---|
![]() |
Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.
The HTML specification recommends that browsers automatically switch to drawing range controls vertically if the specified width is less than the height. Unfortunately, no major browsers currently support vertical range controls directly. You can, however, create a vertical range control by drawing a horizontal range control on its side. The easiest way is to use CSS: by applying a transform
to rotate the element, you can make it vertical. Let's take a look.
HTML
The HTML needs to be updated to wrap the <input>
in a <div>
to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):
<div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </div>
CSS
Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.
.slider-wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; }Then comes the style information for the
<input>
element within the reserved space:
.slider-wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); }
The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the transform-origin
is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.
Result
Screenshot | Live sample |
---|---|
![]() |
Validation
There is no pattern validation available; however, the following forms of automatic validation are performed:
- If the
value
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 than
min
. The default is 0. - The value won't be greater than
max
. The default is 100. - The value will be a multiple of
step
. The default is 1.
Examples
In addition to the assorted examples above, you'll find range inputs demonstrated in these articles:
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of '<input type="range">' in that specification. |
Living Standard | Initial definition |
HTML 5.1 The definition of '<input type="range">' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 23 | IE Full support 10 | Opera Full support 11 | Safari Full support 3.1 | WebView Android
Full support
4.4
| Chrome Android Full support 57 | Edge Mobile ? | Firefox Android Full support 52 | Opera Android Full support Yes | Safari iOS Full support 5.1 | Samsung Internet Android ? |
Tick mark support | Chrome Full support Yes | Edge ? | Firefox
No support
No
| IE ? | Opera Full support Yes | Safari No support No | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile ? | Firefox Android
No support
No
| Opera Android Full support Yes | Safari iOS No support No | Samsung Internet Android ? |
Vertically-oriented slider support | Chrome
Full support
Yes
| Edge ? | Firefox
No support
No
| IE
Full support
10
| Opera
Full support
Yes
| Safari
Full support
Yes
| WebView Android
Full support
Yes
| Chrome Android
Full support
Yes
| Edge Mobile ? | Firefox Android
No support
No
| Opera Android
Full support
Yes
| Safari iOS
Full support
Yes
| Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
See also
- HTML Forms
<input>
and theHTMLInputElement
interface it's based upon<input type="number">