Range Bootstrap 5

Custom Range

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

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 it with property:

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 it with property:

Example

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

Try It Yourself