Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

Range on Bootstrap
Overview

Create custom input type="range" controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports โ€œfillingโ€ their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.

<label class="form-label" for="customRange1">Example range</label>
<input class="form-range" id="customRange1" type="range" />
Min and max

Range inputs have implicit values for min and maxโ€”0 and 100, respectively. You may specify new values for those using the min and max attributes.

<label class="form-label" for="customRange2">Example range</label>
<input class="form-range" id="customRange2" type="range" min="0" max="5" />
Steps

By default, range inputs โ€œsnapโ€ to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

<label class="form-label" for="customRange3">Example range</label>
<input class="form-range" id="customRange3" type="range" min="0" max="5" step="0.5" />

Thank you for creating with Falcon |
2021 © Themewagon

v3.2.0

customize