Bootstrap 5

Bootstrap Tutorials

Bootstrap 5 Range

Bootstrap 5 Range



Create custom < input type="range" > controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.


Disabling Range Button:-


Add the disabled boolean attribute on an input to give it a grayed-out appearance and remove pointer events.


Changing Stepsize and Max, Min Properties:-


The interval between the range numbers is 1 which is by default. Bootstrap allows us to change it by using the step attribute.

Range inputs have implicit values for min and max which start from 0 to 100, respectively. We can specify new values for them.

Code Explanation

All Tutorials related to Bootstrap Tutorials

All Sections related to Bootstrap 5