Bootstrap Range

Overview

Range inputs allow users to select a value from a specified range.

Basic Range

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

Min and Max

<label for="customRange2" class="form-label">Range (0-5)</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Steps

<label for="customRange3" class="form-label">Range with steps (0.5)</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

Example with Value Display

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

<script>
document.getElementById('range1').addEventListener('input', function() {
    document.getElementById('value1').textContent = this.value;
});
</script>

Next Steps

Next: Bootstrap Input Groups →