Hit enter after type your search item

Bootstrap 5 Range [Understand with 6 Examples]

The range component in Bootstrap 5

  • Bootstrap 5 has built-in support for creating a range selector for the user.
  • Simply use the <input type=”range”> controls with form range for creating range features in your web pages.
  • These custom range inputs provide consistent cross-browser compatibility.

Quick Demos Online:

Simple range, Changing the color, Customizing the runnable track, disabled range

An example of creating a simple range slider in BS 5

In the first example, we used the default style provided by Bootstrap 5 for creating a range. Its range selector is a blue colored circle. Have a look:

See online demo and code

Bootstrap5-range


So, how is it done?
  • Create an input type “range”
  • Assign it the “form-range” class

Changing the color from blue to green example

By using custom CSS, you may change the circle color. We have created a CSS class where we changed the background color of the circle. You need to refer range-cust (or name of your choice) class in the style section. Have a look at an example below where we changed the color from default blue to green. (This is only one way of customizing the color)

See online demo and code

Bootstrap5-range-color

Customizing the runnable track as well as selector color example

In the above demo, we only changed the circle color for selecting the range value. You may also want to change the runnable track – which is grayish by default.

See online demo and code

BS5-range-runnable


The following things are done in the style section:
  • form-range::-webkit-slider-runnable-track class is modified for changing the runnable color from gray to orange.
  • By using the slider-thumb, the color is also changed from default blue to pink.
  • The color of the circle is also changed as you click on it.

An example of a disabled range in Bootstrap 5

To remove pointer events and give it a grayed-out appearance, simply add the disabled attribute (HTML attribute) to any input type, the input type = “range” in our case. See an example below of the disabled range:

See online demo and code

BS5-range-disabled

Using min and max values for range

You may specify the min and max values by using min and max attributes for the range control.

See online demo and code

BS5-range-min-max


As you execute the above code and move the slider, you can see it consists of 10 steps, unlike the first examples.

Using step attribute in range example

Similarly, you may specify the step attribute for the range control.

See the example below for its usage. The only difference between the above and this example is the step attribute. We used the value for step = 2 with min=0 and max = 10.

See online demo and code


In that way, the slider of range should move 20 points with each click.

Note: You may also use Sass variables for customizing the range control. Learn more about it by following the link below:

https://getbootstrap.com/docs/5.0/forms/range/

This div height required for enabling the sticky sidebar