Bootstrap 5Forms

Bootstrap 5 Range Slider

The Bootstrap 5 Range Slider is a form input element that lets users select a numeric value by dragging a handle along a horizontal track. It is built using the native HTML input[type='range'] element, styled with the .form-range class for consistent cross-browser rendering. Use it when you need users to pick a value within a defined min/max boundary, especially where approximate precision is acceptable.

Primary Class

.range-slider

Common Use Cases

→A mortgage calculator where users drag to set a loan amount between £50,000 and £1,000,000 in £5,000 steps
→A product filter on an e-commerce site letting shoppers set a maximum price before results update dynamically
→A video or audio player volume control embedded in a custom media player interface
→A quiz or survey tool where respondents rate their confidence or satisfaction on a 0 to 10 scale

Variants & Classes

Variant	Description	Classes
Range Slider Default	Standard range slider with Bootstrap's default styling.	`range-slider`
Range Slider Responsive	Responsive variant that adapts to different screen sizes.	`range-slider range-slider-responsive`

Code Example

<div class="mb-3">
  <label for="priceRange" class="form-label">Maximum Price: <span id="priceValue">£500</span></label>
  <input
    type="range"
    class="form-range"
    id="priceRange"
    min="0"
    max="1000"
    step="50"
    value="500"
    oninput="document.getElementById('priceValue').textContent = '£' + this.value"
  >
  <div class="d-flex justify-content-between">
    <small class="text-muted">£0</small>
    <small class="text-muted">£1,000</small>
  </div>
</div>

Live Examples

Basic Range Slider

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated range slider with custom colours
✓Range Slider with interactive states
✓Responsive range slider for all screen sizes

Best Practices

Always show the current value in real time

Link the slider to a visible output using a short oninput handler or JavaScript event listener so users always know the exact value they have selected, not just the approximate position of the handle.

Set meaningful step values to reduce input errors

Use the step attribute to constrain snapping points. For a salary range of £20,000 to £100,000, a step of 1000 prevents confusing fractional values and makes the slider easier to control with keyboard arrow keys.

Add min/max labels below the track

Bootstrap does not render tick marks or boundary labels by default, so pair your .form-range with a flex row of small text nodes showing the minimum and maximum values to give users clear reference points.

Test keyboard accessibility explicitly

The range input is natively focusable and responds to arrow keys, Home, and End, but verify that your visible value display updates correctly on keyboard interaction and that the label association via the for attribute is correct.

FAQ

How do I change the colour of the range slider track or thumb in Bootstrap 5?

Bootstrap 5 styles the thumb using the accent-color CSS property in modern browsers, so setting accent-color on the input or a parent element is the quickest approach. For full control across browsers, target the vendor-prefixed pseudo-elements directly: ::-webkit-slider-thumb and ::-moz-range-thumb for the handle, and ::-webkit-slider-runnable-track for the track. Override the Bootstrap variable --bs-primary if you are using the compiled Sass source to propagate your brand colour into the default accent automatically.

Can I create a dual-handle (range-between) slider with Bootstrap 5?

Bootstrap 5 does not include a dual-handle slider component natively. The standard HTML range input only supports a single handle. To implement a price-range style slider with two thumbs, you need either a JavaScript library such as noUiSlider or Ion.RangeSlider, or a CSS trick that stacks two overlapping range inputs and removes the default background from the upper one. Either approach can be styled to match your Bootstrap theme using the same accent-color and pseudo-element techniques.

How does Canvas Builder handle Range Slider generation?

When you describe a range slider in Canvas Builder, it generates a complete, accessible HTML block with the correct .form-range class, a linked label using matching for and id attributes, and an inline script snippet that updates a visible output span in real time. It applies your project brand colour to the accent-color property and wraps everything in a responsive column structure so the slider scales correctly on mobile without any extra work on your part.