Bootstrap - Range

Bootstrap 5 introduces a modern way to create range sliders with enhanced styling, making it easy to include them in your forms and UI components. The range slider is an interactive input type that allows users to select a value from a defined range by sliding a handle along a track. These sliders are perfect for settings like volume control, price filters, or any scenario where a numeric range is required.

In this guide, we'll explore how to use Bootstrap 5's range inputs with examples for basic usage, custom styles, and disabled states.

Basic Range Slider

To create a basic range input, you can use the <input type="range"> element along with Bootstrap's .form-range class.

Example: Basic Range Input

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Range Slider</title>

</head>

<body>

<h2>Basic Range Slider</h2>

</div>

</body>

</html>

Explanation

The .form-range class styles the range input to match Bootstrap's design system.

The range slider defaults to a range of 0 to 100.

Setting Minimum, Maximum, and Step Values

You can set the minimum, maximum, and step values using the min, max, and step attributes.

Example: Customized Range Input

<h2>Customized Range Slider</h2>

</div>

Explanation

min="0" sets the starting value.

max="50" sets the highest value.

step="5" ensures the slider moves in increments of 5.

Displaying the Range Value

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

Example: Displaying Range Value

<h2>Range Slider with Value Display</h2>

<p>Selected Value: <span id="rangeValue">50</span></p>

</div>

Explanation

The oninput attribute updates the <span> element to display the current value of the slider.

Disabled Range Slider

You can disable the range input by adding the disabled attribute.

Example: Disabled Range Input

<h2>Disabled Range Slider</h2>

</div>

Explanation

Adding a disabled makes the range slider non-interactive.

Range Slider with Labels

To provide more context, you can add labels to indicate the minimum and maximum values.

Example: Range Slider with Labels

<h2>Range Slider with Labels</h2>

<label for="labeledRange" class="form-label">Adjust the range:</label>

</div>

Explanation

The <label> provides a description for the slider.

The d-flex and justify-content-between classes help align labels below the slider.

Custom Styling

You can also apply custom styling to range sliders using Bootstrap's utility classes.

Example: Styled Range Slider

<h2>Custom Styled Range Slider</h2>

</div>

Explanation

The bg-success class changes the track color to green.

Bootstrap 5 Range Slider with Tooltip

You can enhance the user experience by showing tooltips to indicate the value selected by the slider.

Example: Range Slider with Tooltip

<h2>Range Slider with Tooltip</h2>

</div>

Explanation

JavaScript updates the tooltip with the current slider value.

Conclusion

Bootstrap 5 provides an easy and customizable way to create range sliders for your forms. From basic usage to custom styles and tooltips, these sliders enhance user interaction with a responsive and modern design.

Key Features Recap:

Feature Description

.form-range Adds Bootstrap styling to the range input

min, max, step Define the range and step values

disabled Disables the range input

Inline Labels & Tooltips Enhance usability with contextual information

By leveraging Bootstrap 5's range of input styles, you can quickly implement sliders that are both functional and visually appealing in your web projects.