Range

Overzicht

Maak eigen <input type="range">-besturingselementen met .form-range. Zowel de track (de achtergrond) als de thumb (de waarde) zijn zo opgemaakt dat ze er in alle browsers hetzelfde uitzien. Omdat alleen Firefox het "vullen" van de track links of rechts van de thumb ondersteunt als visuele voortgangsindicatie, ondersteunen wij dat momenteel niet.

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

Uitgeschakeld

Voeg het booleaanse attribuut disabled toe aan een input om hem grijs te maken, pointer events uit te schakelen en focus te voorkomen.

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

Min en max

Range-inputs hebben impliciete waarden voor min en max — respectievelijk 0 en 100. Je kunt daar nieuwe waarden voor opgeven met de attributen min en max.

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

Stappen

Standaard "klikken" range-inputs vast op hele getallen. Om dat te wijzigen kun je een step-waarde opgeven. In het onderstaande voorbeeld verdubbelen we het aantal stappen met step="0.5".

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

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.