Bereik - range

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Voeg de <range> toe. Zie onderstaand voorbeeld voor meer informatie.

Tip: Om bereik-invoervelden een eigen gekozen kleur mee te geven kan gebruik gemaakt worden van accentkleur op formulierelementen.

Voorbeelden

Basis

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <label for="range-example-1">Range</label>
    <input type="range" id="range-example-1" name="range-example-1" min="0" max="100">
  </div>
</form>

Horizontaal uitgelijnd

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="horizontal-view">
    <label for="range-example-2">Range</label>
    <input type="range" id="range-example-2" name="range-example-2" min="0" max="100">
  </div>
</form>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/form-base";

Instelbare variabelen

Dit element heeft zelf geen instelbare variabelen.

Bijbehorende elementen: