The range is a slider component that allows users to make selections from a range of values.

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>

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

Up next
Input group

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.