Range
The range is a slider component that allows users to make selections from a range of values.
Create amazing Typeform-like forms and pages just by writing Markdown!
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.
HTML
<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">
Information
Please note, the range input is block-level and will take up the full width of the parent container. In the example above (and all others on this page), the input has been placed inside a container with the class.specific-w-300
.
Disabled #
Disable a range input by adding the disabled
attribute. This will change the appearance of the input, remove pointer events, and prevent focusing.
HTML
<!-- 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.
HTML
<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).
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.