Bootstrap 5 Range component
Use our custom range inputs for consistent cross-browser styling and built-in customization.
Range slider
Create custom <input type="range">
controls with .form-range
. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
<input type="range" class="form-range" id="customRange1"
value="32" style="--track-fg-width:32%" />
How to Filling
As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, Bootstrap do not currently support it yet.
New Feature
Changing the local CSS variable --track-fg-width
when a slider input’s value has changed via javascript.
<input type="range" min="0" max="100" class="form-range"
value="50" style="--track-fg-width:50%" />
Javascript code:
range.addEventListener('input', (e) => {
var value = (range.value / max) * 100;
range.style.setProperty('--track-fg-width', value + '%');
});
Disabled
Add the disabled
boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.
<input type="range" min="0" max="100" class="form-range"
value="50" style="--track-fg-width:50%" disabled/>
With Min and max
Range inputs have implicit values for min
and max
—0
and 100
, respectively. You may specify new values for those using the min
and max
attributes.
<input type="range" class="form-range" min="0" max="5" />
With Steps
By default, range inputs “snap” to integer values. To change this, you can specify a step
value. In the example below, we double the number of steps by using step="0.5"
.
<input type="range" class="form-range" min="0" max="5" step="0.5" />