Range

Available classes

.form-range {/**/}

Examples

Example of usage of <input type="range"> combined with form-range class.

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

Disabled

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled />

Min and max

Rewrite the min and max values with min="" and max="".

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

Steps

Set a custom step with step=""

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3" />
Edit this page on GitHub Updated at Fri, Nov 5, 2021