Range

Consistent cross-browser and cross-device range input. Documentation and description for the corresponding control.

Basic Example
States

Basic Example #

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.

Example

Example range

<label for="customRange1" class="form-label">Example range</label
><input type="range" class="form-range" id="customRange1" />

States #

A range can be in several different states. Below you can see a demo of these states:

Example

Normal

Disabled

<div class="mb-4">
    <label for="customRange2-normal" class="form-label">Normal</label
    ><input type="range" class="form-range" id="customRange2-normal" />
</div>
<div>
    <label for="customRange2-disabled" class="form-label">Disabled</label
    ><input type="range" class="form-range" id="customRange2-disabled" disabled="" />
</div>