Over <input type="range">
Met <input type="range"> maak je een eenvoudige schuifregelaar zoals in het voorbeeld hieronder. De mogelijkheden zijn beperkt, dat komt omdat het een "algemeen" element is, niet toegespitst op een bepaalde toepassing.
De code van het voorbeeld luidt:
<form oninput="x.value=a.value">
<label for="a">Schuif tussen -100 en +100 </label>
<input type="range" id="a" min="-100" max="100" step="0.1" value="0">
Waarde; <output id="out" name="x" for="a"></output>
<input type="reset" value="Overnieuw" style="float:right">
</form>Het attribuut type="range" wordt vaak gebruikt samen met een of meerdere andere attributen, zie onderstaand overzicht.
| Attribuut | Betekenis | |
| min | Met dit getal (dit kan een geheel of gebroken getal zijn) geef je aan
wat de laagste waarde is die de schuifregelaar kan hebben. De schuif staat dan helemaal links. De default-waarde is 0. |
|
| max | Met dit getal (dit kan een geheel of gebroken getal zijn) geef je aan
wat de hoogste waarde is die de schuifregelaar kan hebben. De schuif staat dan helemaal rechts. De default-waarde is 100. |
|
| value | De stand van de schuif (dus de waarde van de schuifregelaar) als de
pagina wordt geladen of als de regelaar opnieuw wordt ingesteld door eeen reset-knop. De default-waarde is ½(min + max). |
|
| step | De schuifregelaar werkt in step discrete stappen. Dit is een
geheel of gebroken, positief getal. De default-waarde is 1. |
Op het moment dat dit geschreven wordt (januari 2021) is de toepasbaarheid van deze schuifregelaar nog beperkt tot moderne
browsers. Bij iets oudere versies werkt de regelaar niet of niet goed.
Ontwikkelingen wijzen er op dat verticale uitvoeringen van deze schuifregelaar mogelijk worden met behulp van CSS-instellingen.
Voor alternatieven voor deze schuifregelaar raadpleeg je o.a. de items Schuifregelaars voor het instellen van formuliervelden I: horizontaal en Schuifregelaars I: horizontaal. Je vindt daar ook links naar verticale uitvoeringen.
