Bereik

Introductie

Een bereikcomponent maakt het mogelijk om met een schuifbalk een waarde binnen een vooraf ingesteld minimum en maximum te selecteren. Dit is vooral handig bij numerieke keuzes, zoals het instellen van een hoeveelheid of een niveau.

Snelstart

SCSS importeren:

    
      
    
    @use "@minvws/manon/components/form";
  

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

Voorbeelden

Voorbeeld: Basis

Range

    
      
    
    <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>
  

Voorbeeld: Horizontaal uitgelijnd

Range

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