🎚️ Bootstrap 5 – Range Inputs: Add Sliders for Smooth User Input

Introduction – What Are Range Inputs in Bootstrap 5?

Range inputs in Bootstrap 5 are sleek slider controls that let users select a numeric value by sliding a handle along a track. These inputs are perfect for choosing values like volume, brightness, ratings, or any numeric range.

Bootstrap provides a dedicated class .form-range to style the default HTML <input type="range"> element in a clean and mobile-friendly way.

In this guide, you’ll learn:

• How to create and style range sliders
• Add labels and tooltips for better UX
• Customize min/max values and steps
• Use range inputs in real-world use cases

Example 1 – Basic Range Input

<label for="volumeControl" class="form-label">Volume</label>
<input type="range" class="form-range" id="volumeControl">

Explanation:

• Default range is from 0 to 100 with a step of 1

Example 2 – Custom Min, Max, and Step

<label for="ratingRange" class="form-label">Rating (1 to 10)</label>
<input type="range" class="form-range" min="1" max="10" step="1" id="ratingRange">

Example 3 – Disabled Range Input

<label for="disabledRange" class="form-label">Unavailable Setting</label>
<input type="range" class="form-range" id="disabledRange" disabled>

• Use disabled to block interaction when needed.

Example 4 – Dynamic Value Display

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

<script>
  const range = document.getElementById('liveRange');
  const display = document.getElementById('rangeValue');

  range.addEventListener('input', function () {
    display.textContent = this.value;
  });
</script>

• Adds real-time interactivity to display selected value.
• Useful for filters, controls, and preview sliders.

Example 5 – Range Inputs Inside Form Layouts

<form class="row g-3">
  <div class="col-md-6">
    <label for="speedRange" class="form-label">Speed</label>
    <input type="range" class="form-range" min="0" max="200" step="10" id="speedRange">
  </div>
  <div class="col-md-6">
    <label for="sizeRange" class="form-label">Size</label>
    <input type="range" class="form-range" min="1" max="5" step="1" id="sizeRange">
  </div>
</form>

• Combine with .row and .col-* for responsive layout.

Best Practices for Range Inputs

Summary – Use Sliders for Smooth, Interactive Inputs

Bootstrap 5 range inputs help you create modern, responsive sliders for numeric input. Whether you’re building settings panels, search filters, or custom UI controls, .form-range provides a lightweight, accessible way to improve user experience.

Key Takeaways:

• Use <input type="range" class="form-range"> to create sliders
• Customize min, max, and step values as needed
• Combine with labels and JavaScript for dynamic interactivity
• Use inside responsive forms with .row and .col-*
• Always ensure usability and accessibility

Ideal for filters, dashboards, games, preference settings, and any numeric value control.

FAQs – Bootstrap 5 Range Inputs

Can I use Bootstrap range sliders without JavaScript?
Yes, but JS is needed if you want to show the live value or trigger actions dynamically.

How do I change the style of the slider thumb and track?
Use custom CSS with ::-webkit-slider-thumb and ::-webkit-slider-runnable-track.

Can I make the slider vertical in Bootstrap 5?
Bootstrap does not provide vertical range sliders out of the box. You’d need custom CSS or a plugin.

Is .form-range responsive by default?
Yes, it adjusts to container width and works well in grid layouts.