Skip to main content

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.