Range

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

Range on Bootstrap

Overview

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

Min and max

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

Steps

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