Bootstrap Form Range

Bootstrap uniquely styles the native HTML <input type="range"> element. By simply adding the .form-range class, it overrides heavily fragmented, wildly different default browser range tracks (like the thick blue bar in Chrome vs. the thin gray bar in Firefox) and standardizes them completely.

---

Basic Range Slider

To implement, create an input component categorized as a generic type="range" and explicitly add the .form-range utility class directly onto it.

<!-- Apply .form-range class to a range input -->
<label for="customRange1" class="form-label">Example Audio Volume</label>
<input type="range" class="form-range" id="customRange1">

---

Min, Max, and Steps

Range inputs utilize standard HTML attributes to completely constrain boundaries. The fundamental numerical values for range inputs sit between 0 and 100. You can violently alter this utilizing the min and max parameters.

Furthermore, adding the step attribute forces the slider thumb to snap strictly to specific increment markers instead of gliding smoothly!

<!-- Minimum is 0, Maximum is 5 -->
<label for="customRange2" class="form-label">Difficulty Level</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

<!-- Sliding thumb SNAPS forcibly to 0.5 decimal intervals -->
<label for="customRange3" class="form-label">Fine-tuned Interval</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

---

Disabled Range Slider

To lock interaction permanently, place the standard HTML boolean disabled flag onto the component. Bootstrap's internal variables will natively recognize this code and instantly mute the control's coloration, rendering the slider ball completely un-clickable.

<!-- The 'disabled' attribute visually dims and physically locks movement -->
<label for="disabledRange" class="form-label">Restricted Control</label>
<input type="range" class="form-range" id="disabledRange" disabled>

---

Common Mistakes to Avoid

---

Try It: Displaying the Live Value

A second example — showing the current slider value next to the control as the user drags it:

<label for="volume" class="form-label">Volume: <span id="volumeValue">50</span></label>
<input type="range" class="form-range" id="volume" min="0" max="100" value="50">

<script>
    document.getElementById("volume").addEventListener("input", function() {
        document.getElementById("volumeValue").textContent = this.value;
    });
</script>

---

Frequently Asked Questions