Bootstrap 5 Forms
BS5 Range
Custom Range
Add the .form-range class to the input element with type=”range” in order to style a range menu:
Example
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">
Steps
The gap between the range numbers is one by default. The step attribute can be used to alter it:
Example
<input type="range" class="form-range" step="10">
Min and Max
The minimum value is 0 and the highest value is 100 by default. The min and/or max attributes can be used to modify it:
Example
<input type="range" class="form-range" min="0" max="4">
