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