Range in Bootstrap 5

Bootstrap Range

In Bootstrap , you can create range sliders using the <input> element with the type="range" attribute and custom CSS classes.

As an example:

Editor

Loading...

In this example:

• The range sliders are created using the <input> element with the type="range" attribute.
• The range sliders have the form-range class applied to them for styling.
• Each range slider has a unique id attribute, and the associated <label> elements use the for attribute to associate with the respective range sliders.
• Range Slider 2 has a minimum value of 0, a maximum value of 100, a step of 5, and an initial value of 50.
• You can also disable a range slider by adding the disabled attribute to the <input> element, as shown in Range Slider 3.

tip

You can customize the range slider by adding additional attributes to the <input> element, such as min, max, step, and value.