Range

Overview #

A range input can be created by adding the .form-range class to an <input type="range"> element. The min and max attributes can be specified to set the minimum and maximum accepted values. The default is 0 and 100 respectively. Range inputs "snap" to integer values, which is specified by the step attribute.

<label for="example-range-1" class="form-label">Display brightness</label>
<input type="range" class="form-range" min="0" max="10" step="1" id="example-range-1">

Disabled #

Disable a range input by adding the disabled attribute. This will change the appearance of the input, remove pointer events, and prevent focusing.

<!-- Disabled range -->
<label for="example-range-2" class="form-label">Volume</label>
<input type="range" class="form-range" disabled min="0" max="100" step="5" id="example-range-2">

Example #

You can use flex and other utilities to create nice layouts for range inputs. Here's an example of a common UI/UX pattern showing another volume control.

<label for="example-range-3" class="form-label">Master volume</label>
<div class="d-flex align-items-center">
  <i class="fa-light fa-volume-low flex-shrink-0" style="width: 40px;"></i>
  <input type="range" class="form-range" min="0" max="100" step="1" id="example-range-3">
  <i class="fa-light fa-volume-high flex-shrink-0 text-end" style="width: 40px;"></i>
</div>

Please note, the icons being used are taken from the Font Awesome icon library (opens in new tab).