Bootstrap 5 range sliders let users select a value within a range. This page covers 4 range patterns — basic, live value display, price filter and custom colors — each ready to use in forms and filter panels.

Quick Setup

Range sliders need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

Class / AttributeWhat It Does
.form-rangeRequired class for styled range input
type="range"Creates the range slider
min="0"Minimum value
max="100"Maximum value
step="5"Increment size
value="50"Initial position
disabledDisables the slider
oninputFires as user drags
onchangeFires when user releases

1. Basic Bootstrap 5 Range Slider

Standard range sliders in default, small and large sizes using form-range class.

2. Bootstrap 5 Range with Live Value Display

Range slider that shows the current value as you drag. Updates in real time using JavaScript.

3. Bootstrap 5 Price Range Filter

A price range filter with min/max inputs synced to a range slider. Common in e-commerce filter sidebars.

4. Bootstrap 5 Custom Styled Range Sliders

Range sliders with custom brand colors using CSS custom properties.

Frequently Asked Questions

Use the value property: const value = document.getElementById('myRange').value. To listen for changes in real time use the input event: range.addEventListener('input', e => console.log(e.target.value)). Use change event to only fire when the user stops dragging.
Use HTML attributes: <input type='range' min='0' max='100' step='5' value='50'>. min sets the minimum value, max sets the maximum, step sets the increment size. The value attribute sets the initial position.
Position a span absolutely above the range. Calculate its position based on the range value: const percent = (value - min) / (max - min); tooltip.style.left = percent * rangeWidth + 'px'. Update on the input event. This requires custom CSS and JavaScript.
Bootstrap 5 doesn't include a dual-handle range slider natively. Use a library like noUiSlider or Ionrangeslider which both support Bootstrap styling. For a simple approach overlap two range inputs and track both values separately in JavaScript.
Use the CSS accent-color property on the input: <input type='range' style='accent-color:#fd4766'>. This changes the thumb and track fill color in modern browsers. For older browsers override the vendor-specific pseudoelements: input[type=range]::-webkit-slider-thumb { background: #fd4766; }.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Form Validation

View examples →

Bootstrap 5 Progress Bar

View examples →

Bootstrap 5 Input Group

View examples →