<input type="range">Baseline · Widely available
The <input type="range"> element represents a slider for choosing an inexact value between a minimum and maximum value.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 16, 2017. Widely available since Sep 16, 2019.
Browser support
DesktopChrome
1–3Not supported
4+Supportedsince Jan 25, 2010
Current: 155Edge
12+Supportedsince Jul 29, 2015
Current: 154Firefox
1–22Not supported
23+Supportedsince Aug 6, 2013
Current: 157Safari
1–3Not supported
3.1+Supportedsince Mar 18, 2008
Current: 27MobileChrome Android
18–56Not supported
57+Supportedsince Mar 16, 2017
Current: 155Firefox Android
4–51Not supported
52+Supportedsince Mar 7, 2017
Current: 157Safari iOS
1–4.2Not supported
5+Supportedsince Oct 12, 2011
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: range.
Feature detection
JS · check before using
if ("type_range" in document.createElement("input")) {
// the type_range attribute/property of <input> is supported
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (3). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| input.type_range | 4 | 12 | 23 | 3.1 | 57 | 52 | 5 |
| input.type_range.tick_marks | ≤67 | 79 | 109 | 12.1 | ≤67 | 109 | 12.2 |
| input.type_range.vertical_orientation | 124 | 12 | 120 | 16.5 | 124 | 120 | 16.5 |