Create custom <input type="range">
controls with .form-range
.
<label class="form-label" for="customRange1">Example range</label>
<input class="form-range" id="customRange1" type="range">
Add the disabled
boolean attribute on an input to give it a grayed out appearance and remove pointer events.
<label class="form-label" for="disabledRange">Disabled range</label>
<input class="form-range" id="disabledRange" type="range" disabled>
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.
<label class="form-label" for="customRange2">Example range</label>
<input class="form-range" id="customRange2" type="range" min="0" max="5">
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"
.
<label class="form-label" for="customRange3">Example range</label>
<input class="form-range" id="customRange3" type="range" min="0" max="5" step="0.5">