<input type="range"> — HTML element uitgelegd

Waarde

De waarde van een <input type="range">-element wordt ingesteld met het value-attribuut, dat een string accepteert die het geselecteerde getal voorstelt. De waarde is nooit een lege string (""). De standaardwaarde ligt halverwege het opgegeven minimum en maximum — tenzij het maximum daadwerkelijk kleiner is dan het minimum, in welk geval de standaardwaarde wordt ingesteld op de waarde van het min-attribuut. Het algoritme voor het bepalen van de standaardwaarde is:

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

Als geprobeerd wordt de waarde lager in te stellen dan het minimum, wordt deze op het minimum ingesteld. Evenzo resulteert een poging om de waarde hoger in te stellen dan het maximum erin dat deze op het maximum wordt ingesteld.

Validatie

Er is geen patroonvalidatie beschikbaar; de volgende vormen van automatische validatie worden echter wel uitgevoerd:

Als de value wordt ingesteld op iets dat niet kan worden omgezet in een geldig drijvendekommagetal, mislukt de validatie omdat de invoer een ongeldige invoer heeft.
De waarde is niet kleiner dan min. De standaardwaarde is 0.
De waarde is niet groter dan max. De standaardwaarde is 100.
De waarde is een veelvoud van step. De standaardwaarde is 1.

Aanvullende attributen

Naast de attributen die door alle <input>-elementen worden gedeeld, bieden range-invoervelden de volgende attributen.

Opmerking

De volgende invoerattributen zijn niet van toepassing op de range-invoer: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size en src. Elk van deze attributen wordt, indien opgenomen, genegeerd.

list

De waarde van het list-attribuut is de id van een <datalist>-element dat zich in hetzelfde document bevindt. De <datalist> biedt een lijst van vooraf gedefinieerde waarden die aan de gebruiker worden voorgesteld voor dit invoerveld. Waarden in de lijst die niet compatibel zijn met het type worden niet opgenomen in de voorgestelde opties. De aangeboden waarden zijn suggesties, geen vereisten: gebruikers kunnen uit deze vooraf gedefinieerde lijst kiezen of een andere waarde opgeven.

Zie tikmarkeringen toevoegen hieronder voor een voorbeeld van hoe de opties op een range worden aangeduid in ondersteunde browsers.

max

De hoogste waarde in het bereik van toegestane waarden. Als de value die in het element wordt ingevoerd deze overschrijdt, voldoet het element niet aan de beperkingsvalidatie. Als de waarde van het max-attribuut geen getal is, heeft het element geen maximumwaarde.

Deze waarde moet groter zijn dan of gelijk zijn aan de waarde van het min-attribuut. Zie het HTML-attribuut max.

min

De laagste waarde in het bereik van toegestane waarden. Als de value van het element kleiner is dan deze waarde, voldoet het element niet aan de beperkingsvalidatie. Als voor min een waarde is opgegeven die geen geldig getal is, heeft het invoerveld geen minimumwaarde.

Deze waarde moet kleiner zijn dan of gelijk zijn aan de waarde van het max-attribuut. Zie het HTML-attribuut min.

Opmerking

Als de waarden van min en max gelijk zijn, of de waarde van max lager is dan die van min, kan de gebruiker niet met de range interageren.

step

Het step-attribuut is een getal dat de granulariteit aangeeft waaraan de waarde moet voldoen, of de speciale waarde any, die hieronder wordt beschreven. Alleen waarden die een geheel aantal stappen vanaf de stapbasis verwijderd zijn, zijn geldig. De stapbasis is min indien opgegeven, anders value, of 0 als geen van beide is opgegeven.

De standaard stapwaarde voor step-invoervelden is 1, waardoor alleen gehele getallen kunnen worden ingevoerd — tenzij de stapbasis geen geheel getal is.

Een stringwaarde van any betekent dat er geen stapgrootte wordt opgelegd, en dat elke waarde is toegestaan (behoudens andere beperkingen, zoals min en max). Zie het voorbeeld Step instellen op de waarde any voor hoe dit werkt in ondersteunde browsers.

Opmerking

Wanneer de door een gebruiker ingevoerde waarde niet voldoet aan de stapconfiguratie, kan de user agent de waarde afronden naar de dichtstbijzijnde geldige waarde, waarbij bij twee even dichtbijgelegen opties naar boven wordt afgerond.

Niet-standaard attributen

orient

Vergelijkbaar met de niet-standaard CSS-eigenschap -moz-orient, die van invloed is op de elementen <progress> en <meter>, bepaalt het orient-attribuut de oriëntatie van de range-schuifregelaar. Mogelijke waarden zijn horizontal, wat betekent dat de range horizontaal wordt weergegeven, en vertical, waarbij de range verticaal wordt weergegeven.

Voorbeelden

Terwijl het type number gebruikers een getal laat invoeren met optionele beperkingen die hun waarde dwingen tussen een minimum- en maximumwaarde te liggen, vereist het wel dat ze een specifieke waarde invoeren. Met het invoertype range kunt u de gebruiker om een waarde vragen in gevallen waarin het de gebruiker misschien niet eens uitmaakt — of weet — wat de specifieke geselecteerde numerieke waarde is.

Enkele voorbeelden van situaties waarin range-invoervelden vaak worden gebruikt:

Audiobediening zoals volume en balans, of filterinstellingen.
Kleurconfiguratie-instellingen zoals kleurkanalen, transparantie, helderheid, enzovoort.
Spelconfiguratie-instellingen zoals moeilijkheidsgraad, zichtafstand, wereldgrootte, enzovoort.
Wachtwoordlengte voor door een wachtwoordbeheerder gegenereerde wachtwoorden.

Als vuistregel geldt: als de gebruiker waarschijnlijk meer geïnteresseerd is in het percentage van de afstand tussen de minimum- en maximumwaarde dan in het werkelijke getal zelf, is een range-invoerveld een uitstekende kandidaat. Bij een volumeregeling voor een thuisstereo-installatie denken gebruikers bijvoorbeeld doorgaans "zet het volume op de helft van het maximum" in plaats van "zet het volume op 0,5".

Het minimum en maximum opgeven

Standaard is het minimum 0 en het maximum 100. Als dat niet is wat u wilt, kunt u eenvoudig andere grenzen opgeven door de waarden van de attributen min en/of max te wijzigen. Dit kunnen willekeurige drijvendekommawaarden zijn.

Om bijvoorbeeld de gebruiker om een waarde tussen -10 en 10 te vragen, kunt u het volgende gebruiken:

HTML

<input type="range" min="-10" max="10" />

Resultaat in de browser

De granulariteit van de waarde instellen

Standaard is de granulariteit 1, wat betekent dat de waarde altijd een geheel getal is. Om de granulariteit te regelen, kunt u het step-attribuut wijzigen. Als u bijvoorbeeld een waarde nodig heeft die halverwege 5 en 10 ligt, moet u de waarde van step instellen op 0,5:

Het step-attribuut instellen

HTML

<input type="range" min="5" max="10" step="0.5" />

Resultaat in de browser

Step instellen op `any`

Als u elke waarde wilt accepteren, ongeacht het aantal decimalen, kunt u een waarde van any opgeven voor het step-attribuut:

HTML

<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>

JavaScript

const value = document.querySelector("#value");
const input = document.querySelector("#pi_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});

Resultaat in de browser

Met dit voorbeeld kan de gebruiker elke waarde tussen 0 en π selecteren, zonder enige beperking op het decimale deel van de geselecteerde waarde. JavaScript wordt gebruikt om te laten zien hoe de waarde verandert terwijl de gebruiker met de range interageert.

Tikmarkeringen toevoegen

Om tikmarkeringen aan een range-besturingselement toe te voegen, neemt u het list-attribuut op en geeft u het de id van een <datalist>-element dat een reeks tikmarkeringen op het besturingselement definieert. Elk punt wordt weergegeven met een <option>-element waarvan de value is ingesteld op de waarde van de range waarbij een markering moet worden getekend.

HTML

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Resultaat

Resultaat in de browser

Dezelfde datalist gebruiken voor meerdere range-besturingselementen

Om te voorkomen dat u code herhaalt, kunt u diezelfde <datalist> hergebruiken voor meerdere <input type="range">-elementen en andere <input>-typen.

Opmerking

Als u, zoals in het onderstaande voorbeeld, ook de labels wilt tonen, heeft u een datalist per range-invoerveld nodig.

HTML

<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>

Resultaat

Resultaat in de browser

Labels toevoegen

U kunt tikmarkeringen labelen door de <option>-elementen label-attributen te geven. De inhoud van het label wordt echter standaard niet weergegeven. U kunt CSS gebruiken om de labels te tonen en correct te positioneren. Hier is een manier waarop u dit zou kunnen doen.

HTML

<label for="tempB">Choose a comfortable temperature:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="very cold!"></option>
  <option value="25" label="cool"></option>
  <option value="50" label="medium"></option>
  <option value="75" label="getting warm!"></option>
  <option value="100" label="hot!"></option>
</datalist>

CSS

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}

Resultaat

Resultaat in de browser

Verticale range-besturingselementen maken

Standaard geven browsers range-invoervelden weer als schuifregelaars waarbij de knop naar links en rechts schuift.

Om een verticale range te maken waarbij de schuifknop op en neer beweegt, stelt u de eigenschap writing-mode in op de waarde vertical-rl of vertical-lr:

HTML

<input type="range" min="0" max="10" value="8" />

CSS

input[type="range"] {
  writing-mode: vertical-lr;
}

Hierdoor wordt de range-schuifregelaar verticaal weergegeven:

Resultaat in de browser

U kunt ook de CSS-eigenschap appearance instellen op de niet-standaard waarde slider-vertical als u oudere versies van Chrome en Safari wilt ondersteunen, en het niet-standaard attribuut orient="vertical" opnemen om oudere versies van Firefox te ondersteunen.

Zie Verticale formulierbesturingselementen maken voor voorbeelden.

Technische samenvatting

Waarde	Een string die de tekstuele representatie van de geselecteerde numerieke waarde bevat; gebruik `valueAsNumber` om de waarde als getal te verkrijgen.
Gebeurtenissen	`change` en `input`
Ondersteunde gemeenschappelijke attributen	`autocomplete`, `list`, `max`, `min`, `step`
IDL-attributen	`list`, `value`, `valueAsNumber`
DOM-interface	`HTMLInputElement`
Impliciete ARIA-rol	`slider`

Het element `<input type="range">`

Waarde

Validatie

Aanvullende attributen

list

max

min

step

Niet-standaard attributen

orient

Voorbeelden

Het minimum en maximum opgeven

De granulariteit van de waarde instellen

Het step-attribuut instellen

Step instellen op `any`

HTML

JavaScript

Tikmarkeringen toevoegen

HTML

Resultaat

Dezelfde datalist gebruiken voor meerdere range-besturingselementen

HTML

Resultaat

Labels toevoegen

HTML

CSS

Resultaat

Verticale range-besturingselementen maken

Technische samenvatting

Zie ook

Verwante elementen

Het element <input type="range">

Waarde

Validatie

Aanvullende attributen

list

max

min

step

Niet-standaard attributen

orient

Voorbeelden

Het minimum en maximum opgeven

De granulariteit van de waarde instellen

Het step-attribuut instellen

Step instellen op any

HTML

JavaScript

Tikmarkeringen toevoegen

HTML

Resultaat

Dezelfde datalist gebruiken voor meerdere range-besturingselementen

HTML

Resultaat

Labels toevoegen

HTML

CSS

Resultaat

Verticale range-besturingselementen maken

Technische samenvatting

Zie ook

Verwante elementen

Het element `<input type="range">`

Step instellen op `any`