Bootstrap 5 Range Sliders

Range sliders are an interactive way to let users select values within a specific range, such as price, volume, or progress. With Bootstrap 5, range inputs are beautifully styled, responsive, and easy to integrate into your web projects.

In this guide, we’ll explore how to use Bootstrap 5 range sliders, customize them, and implement them effectively.

What is a Bootstrap Range Slider?

A range slider is a styled version of the HTML <input type="range"> element. Bootstrap 5 enhances this basic element with consistent design and responsive behavior, ensuring it looks great across all devices.

Basic Range Slider Example

To create a simple range slider, use the form-range class.

Example:

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

Explanation:

  • form-range: This class applies Bootstrap’s styling to the range slider.
  • id and label: Provide a unique identifier for accessibility and user interaction.

Setting a Minimum, Maximum, and Step

The min, max, and step attributes control the range and increments of the slider.

Example:

<div class="mb-3">
  <label for="rangeWithLimits" class="form-label">Range with Limits (10 to 100, step of 10)</label>
  <input type="range" class="form-range" min="10" max="100" step="10" id="rangeWithLimits">
</div>

Explanation:

  • min="10": Sets the lowest selectable value.
  • max="100": Sets the highest selectable value.
  • step="10": Determines the increment value.

Displaying the Selected Value

To display the current value of the slider, you can use JavaScript to update the display dynamically.

Example:

<div class="mb-3">
  <label for="rangeWithValue" class="form-label">Range with Value Display</label>
  <input type="range" class="form-range" id="rangeWithValue" min="0" max="50" oninput="document.getElementById('rangeValue').innerText = this.value">
  <p>Selected Value: <span id="rangeValue">25</span></p>
</div>

Explanation:

  • oninput: Triggers JavaScript whenever the slider’s value changes.
  • innerText: Updates the displayed value dynamically.

Customizing the Range Slider

Changing the Color

You can use CSS to modify the range slider’s track and thumb colors.

Example:

<style>
  .custom-range::-webkit-slider-thumb {
    background-color: #007bff; /* Change thumb color */
  }
  .custom-range::-webkit-slider-runnable-track {
    background-color: #e9ecef; /* Change track color */
  }
</style>

<div class="mb-3">
  <label for="customRange" class="form-label">Custom Range Slider</label>
  <input type="range" class="form-range custom-range" id="customRange">
</div>

Multiple Range Sliders in a Row

Bootstrap’s grid system makes it easy to display multiple range sliders in a row.

Example:

<div class="row">
  <div class="col-md-6">
    <label for="range1" class="form-label">Slider 1</label>
    <input type="range" class="form-range" id="range1">
  </div>
  <div class="col-md-6">
    <label for="range2" class="form-label">Slider 2</label>
    <input type="range" class="form-range" id="range2">
  </div>
</div>

Disabled Range Slider

To disable the slider, add the disabled attribute.

Example:

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

Range Slider with Validation

Bootstrap 5 validation can be applied to range sliders to ensure users select valid values.

Example:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validatedRange" class="form-label">Validated Range Slider</label>
    <input type="range" class="form-range" id="validatedRange" min="10" max="100" required>
    <div class="invalid-feedback">
      Please select a value within the range.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Custom Range Slider with Tooltips

You can use JavaScript or a third-party plugin like noUiSlider to add tooltips that display the current value above the slider thumb.

Example (Using Basic JavaScript):

<div class="mb-3 position-relative">
  <label for="tooltipRange" class="form-label">Range with Tooltip</label>
  <input type="range" class="form-range" id="tooltipRange" min="0" max="100" oninput="updateTooltip(this)">
  <div id="tooltip" style="position: absolute; left: 50%; transform: translateX(-50%);">
    50
  </div>
</div>

<script>
  function updateTooltip(slider) {
    const tooltip = document.getElementById('tooltip');
    tooltip.textContent = slider.value;
    const sliderPosition = slider.getBoundingClientRect();
    const tooltipPosition = ((slider.value - slider.min) / (slider.max - slider.min)) * sliderPosition.width;
    tooltip.style.left = `${tooltipPosition}px`;
  }
</script>

FAQs About Bootstrap 5 Range Sliders

1. Can I use range sliders for mobile applications?

Yes, Bootstrap 5 sliders are fully responsive and work seamlessly on all devices.

2. How do I make a dual-range slider?

Dual-range sliders are not natively supported in Bootstrap 5 but can be achieved using custom JavaScript or third-party libraries.

Conclusion

Bootstrap 5 range sliders are a powerful and flexible tool for adding interactivity to your forms. Whether you’re creating a simple slider, customizing its appearance, or integrating advanced functionality, Bootstrap 5 provides all the tools you need.

Leave a Comment