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

Range on Bootstrap

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" />

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