码农教程 - 一技在手,衣食无忧! tools

Bootstrap 5 Range

❮ Previous Next ❯

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:

Example

<input type="range" class="form-range" step="10">
Try it Yourself »

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:

Example

<input type="range" class="form-range" min="0" max="4">
Try it Yourself »

❮ Previous Next ❯