Kenhuang Academy
  • English

      • 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 →