In Bootstrap 5, you can create stylish range sliders using the `form-range` class. This class provides consistent styling for range sliders and can be combined with other utility classes to customize their appearance and behavior. Here's an example of how to create a range slider in Bootstrap 5:

html
<label for="rangeExample" class="form-label">Range Slider Example</label>
<input type="range" class="form-range" id="rangeExample">

In this example, we have an `<input>` element with the `type="range"` attribute to create a range slider. We add the class `form-range` to apply the Bootstrap styling to the range slider. The `<label>` element provides a descriptive label for the range slider and is associated with it using the `for` attribute.

You can further customize the range slider by adding additional classes or attributes. Here are a few examples:

- Range Slider with Default Value:

You can set a default value for the range slider using the `value` attribute.
html
<input type="range" class="form-range" id="rangeExample" value="50">

- Range Slider with Minimum and Maximum Values:
You can define the minimum and maximum values for the range slider using the `min` and `max` attributes.
html
<input type="range" class="form-range" id="rangeExample" min="0" max="100">

- Range Slider with Step Value:
You can specify the step value for the range slider using the `step` attribute.
html
<input type="range" class="form-range" id="rangeExample" min="0" max="100" step="5">

- Range Slider with Labels:
You can add labels to indicate the minimum and maximum values of the range slider using `<label>` elements and positioning them accordingly.
html
<label for="rangeExample" class="form-label">Range Slider Example</label>
<input type="range" class="form-range" id="rangeExample">
<label for="rangeExample" class="form-label">0</label>
<label for="rangeExample" class="form-label">100</label>

These are some basic examples of creating range sliders in Bootstrap 5. You can combine them with other form elements and styling options to create more complex and customized forms. Make sure to refer to the Bootstrap documentation for additional options and styling classes: https://getbootstrap.com/docs/5.1/forms/range/

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc