Range
Use our custom range inputs for consistent cross-browser styling and built-in customization.
Overview
Create custom <input type="range"> controls with .form-range.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Min and max
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Steps
By default, range inputs "snap" to integer values. To change this, set the step attribute.
<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">Disabled
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>