Learn with us

In Bootstrap 5, you can create stylish range sliders using the <input> element and Bootstrap’s form styling classes. Here’s how you can create range sliders in Bootstrap 5:

1. Basic Range Slider:

<label for="rangeSlider" class="form-label">Select a value</label>
<input type="range" class="form-range" id="rangeSlider">

In this example, the form-label class is applied to the <label> element for better accessibility. The range slider is created using the <input> element with the type="range" attribute and the form-range class.

2. Custom Range Slider with Labels:

<label for="customRange" class="form-label">Select a value</label>
<input type="range" class="form-range" id="customRange" min="0" max="100" step="5">
<div id="rangeValue">50</div>

In this example, we add additional attributes to the <input> element to define the minimum (min), maximum (max), and step size (step) of the range slider. We also include a <div> element with an id of “rangeValue” to display the current value of the range slider.

3. Styling Range Slider Track and Thumb:

<input type="range" class="form-range range-primary" id="styledRange">

You can apply contextual classes like range-primary, range-secondary, etc., to customize the appearance of the range slider track and thumb. These classes allow you to apply different colors to the range slider.

4. Disabled Range Slider:

<input type="range" class="form-range" id="disabledRange" disabled>

Adding the disabled attribute to the <input> element disables the range slider and prevents user interaction.

5. Vertical Range Slider:

<input type="range" class="form-range vertical" id="verticalRange">

By adding the vertical class to the <input> element, you can create a vertical range slider.

These examples demonstrate different variations of range sliders in Bootstrap 5. You can further customize the appearance and behavior of range sliders using additional Bootstrap classes and JavaScript-based plugins if needed.

Remember to include the necessary Bootstrap 5 CSS and JavaScript files in your project to apply the range slider styling and functionality provided by Bootstrap.