<input type="range">
The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
Overview
The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 23 | 3.1 | 57 | 5 | |
html.elements.input.type_range.tick_marks Tick mark support | ≤67 | 79 | 109 | 12.1 | ≤67 | 12.2 |
html.elements.input.type_range.vertical_orientation Vertically-oriented range sliders | 124 | 12 | 120 | 16.5 | 124 | 16.5 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 4 item(s)
Implementation note
- Vertical orientation available via the `writing-mode` property (see Creating vertical controls).
- Vertical orientation available by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (124)
Notes 1 item(s)
Implementation note
- Vertical orientation available by setting the `writing-mode: bt-lr` style on the `input` element.
Notes 4 item(s)
Implementation note
- Vertical orientation available via the `writing-mode` property (see Creating vertical controls).
- Supported using the non-standard `orient="vertical"` attribute.
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (120)
Notes 4 item(s)
Implementation note
- Vertical orientation available via the `writing-mode` property (see Creating vertical controls).
- Vertical orientation available by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (16.5)
Notes 4 item(s)
Implementation note
- Vertical orientation available via the `writing-mode` property (see Creating vertical controls).
- Vertical orientation available by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (124)
Notes 4 item(s)
Implementation note
- Vertical orientation available via the `writing-mode` property (see Creating vertical controls).
- Vertical orientation available by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (16.5)
Syntax
HTML
<label>Volume:
<input type="range" min="0" max="100" value="50">
</label>
<label>Brightness:
<input type="range" min="0" max="100" step="5" value="75">
</label>Live demo
Use cases
Using <input type="range">
The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
Cautions
- May not be supported in older browsers.
Accessibility
- Verify how this element is announced by screen readers.
Related links
Powered by web-features