Bootstrap - Bootstrap 5 Range

Bootstrap 5 provides a range input component that allows users to select numeric values within a given range using a slider.
It is implemented using the HTML5 <input type="range"> element and styled with the .form-range class.

1. Basic Bootstrap 5 Range Slider

The .form-range class styles a default range slider.

<div class="mb-3">
  <label for="customRange1" class="form-label">Default Range</label>
  <input type="range" class="form-range" id="customRange1">
</div>

Key Points:

Uses <input type="range">.
.form-range applies Bootstrap 5 styling.
Default range: 0 to 100.

2. Setting Min, Max, and Step Values

You can control the range and intervals using the min, max, and step attributes.

<div class="mb-3">
  <label for="customRange2" class="form-label">Range with Steps</label>
  <input type="range" class="form-range" min="0" max="50" step="5" id="customRange2">
</div>

Explanation:

min="0" → Minimum value
max="50" → Maximum value
step="5" → Slider moves in increments of 5.

3. Disabled Range Slider

Add the disabled attribute to make the slider unusable.

<div class="mb-3">
  <label for="disabledRange" class="form-label">Disabled Slider</label>
  <input type="range" class="form-range" id="disabledRange" disabled>
</div>

4. Custom Colors for Range Sliders

Bootstrap 5 allows you to customize the slider color using contextual background classes on the track thumb via .bg-*.

<div class="mb-3">
  <label for="rangePrimary" class="form-label">Primary Slider</label>
  <input type="range" class="form-range bg-primary" id="rangePrimary">
</div>

<div class="mb-3">
  <label for="rangeSuccess" class="form-label">Success Slider</label>
  <input type="range" class="form-range bg-success" id="rangeSuccess">
</div>

<div class="mb-3">
  <label for="rangeDanger" class="form-label">Danger Slider</label>
  <input type="range" class="form-range bg-danger" id="rangeDanger">
</div>

5. Range Slider with Live Value Display

Bootstrap 5 doesn’t have a built-in tooltip, but we can use JavaScript to display the current value dynamically.

<div class="mb-3">
  <label for="liveRange" class="form-label">Volume: <span id="rangeValue">50</span></label>
  <input type="range" class="form-range" min="0" max="100" value="50" id="liveRange">
</div>

<script>
  const rangeInput = document.getElementById("liveRange");
  const rangeValue = document.getElementById("rangeValue");

  rangeInput.addEventListener("input", () => {
    rangeValue.textContent = rangeInput.value;
  });
</script>

6. Range Slider with Tooltip (Advanced UI)

Bootstrap 5 doesn't provide native slider tooltips, but we can combine JavaScript with Bootstrap’s tooltips to make it interactive.

<div class="mb-3 position-relative">
  <label for="tooltipRange" class="form-label">Tooltip Slider</label>
  <input type="range" class="form-range" id="tooltipRange" min="0" max="100" value="40" data-bs-toggle="tooltip" data-bs-placement="top" title="40">
</div>

<script>
  const tooltipRange = document.getElementById("tooltipRange");
  const tooltip = new bootstrap.Tooltip(tooltipRange);

  tooltipRange.addEventListener("input", function () {
    tooltip.setContent({ '.tooltip-inner': this.value });
  });
</script>

7. Validation with Range Sliders

You can integrate range sliders into Bootstrap 5 form validation.

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationRange" class="form-label">Select a value between 10 and 90</label>
    <input type="range" class="form-range" id="validationRange" min="10" max="90" required>
    <div class="invalid-feedback">
      Please choose a valid range.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

8. Full Example: All Bootstrap 5 Range Slider Features

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Range Sliders</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

  <h3>Bootstrap 5 Range Sliders</h3>

  <!-- Basic Slider -->
  <div class="mb-3">
    <label for="basicRange" class="form-label">Basic Range</label>
    <input type="range" class="form-range" id="basicRange">
  </div>

  <!-- Min, Max, Step -->
  <div class="mb-3">
    <label for="stepRange" class="form-label">Range with Steps (0 to 50, step 5)</label>
    <input type="range" class="form-range" min="0" max="50" step="5" id="stepRange">
  </div>

  <!-- Disabled -->
  <div class="mb-3">
    <label for="disabledRange" class="form-label">Disabled Slider</label>
    <input type="range" class="form-range" id="disabledRange" disabled>
  </div>

  <!-- Colors -->
  <div class="mb-3">
    <label for="coloredRange" class="form-label">Primary Slider</label>
    <input type="range" class="form-range bg-primary" id="coloredRange">
  </div>

  <!-- Live Value -->
  <div class="mb-3">
    <label for="volumeRange" class="form-label">Volume: <span id="volumeValue">50</span></label>
    <input type="range" class="form-range" min="0" max="100" value="50" id="volumeRange">
  </div>

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

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>