Bootstrap 5 Range

Custom Range

To set the style of the range menu, please use .form-range Add the class to the input element with type="range":

Custom Range:

Example

<label for="customRange" class="form-label">Custom Range</label>
<input type="range" class="form-range" id="customRange">

Try It Yourself

Step

By default, the interval between range values is 1. You can use step Change the attribute:

Example

<input type="range" class="form-range" step="10">

Try It Yourself

Minimum and Maximum Values

By default, the minimum value is 0, and the maximum value is 100. You can use min and/or max Change the attribute:

Example

<input type="range" class="form-range" min="0" max="4">

Try It Yourself