Easy Tutorial
Bootstrap5 Utilities Bootstrap5 Modal Bootstrap5 Container Bootstrap5 Navs Bootstrap5 List Groups Bootstrap5 Form Range Bootstrap5 Form Select Bootstrap5 Buttons Bootstrap5 Pagination Bootstrap5 Cards Bootstrap5 Dropdowns Bootstrap5 Tables Bootstrap5 Badges Bootstrap5 Offcanvas Bootstrap5 Popover Bootstrap5 Collapse Bootstrap5 Spinners Bootstrap5 Alerts Bootstrap5 Progressbars Bootstrap5 Form Validation Bootstrap5 Flex Bootstrap5 Colors Bootstrap5 Typography Bootstrap5 Install Bootstrap5 Form Check Radio Bootstrap5 Button Groups Bootstrap5 Form Input Group Bootstrap5 Tutorial Bootstrap5 Tooltip Bootstrap5 Carousel Bootstrap5 Forms Bootstrap5 Jumbotron Bootstrap5 Navbar Bootstrap5 Form Floating Labels Bootstrap5 Grid Basic Bootstrap5 Images Bootstrap5 Scrollspy
❮ Bootstrap5 List Groups Bootstrap5 Form Select ❯

Bootstrap5 Range Selection

To set up a range selection, you can add type="range" to the input element and use the .form-range class:

Range Selection:

Example

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

Step Size

By default, the step size is 1, which can be set using the step attribute:

Example

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

Minimum and Maximum Values

By default, the minimum value is 0 and the maximum value is 100, which can be set using the min (minimum) or max (maximum) attributes:

Example

<input type="range" class="form-range" min="0" max="4">
❮ Bootstrap5 List Groups Bootstrap5 Form Select ❯