Bootstrap 5 Range
Custom Range
To style a range menu, add the .form-range class to the input element with type="range":
Example
<label for="customRange" class="form-label">Custom range</label>
<input
type="range" class="form-range" id="customRange">
Try it Yourself »
Steps
By default, the interval between the range numbers is 1. You can change it by using the step attribute:
Min and Max
By default, the minimum value is 0 and maximum value is 100. You can use
the min and/or max
attribute change it:
