`<input type=range>` în HTML

Glisorul (slider) pentru alegerea unei valori aproximative dintr-un interval, cum ar fi volumul sau un buget.

Sintaxă tag

<input type="range" name="volum" min="0" max="100" step="5" value="50">

Ce face `<input type=range>`

<input type="range"> afișează un glisor pe care utilizatorul îl trage cu mausul, cu degetul sau cu săgețile de pe tastatură. Este potrivit când valoarea exactă nu contează foarte mult: volum, luminozitate, buget aproximativ.

Intervalul implicit este de la 0 la 100, cu pasul 1. Dacă nu dai value, glisorul pornește de la mijlocul intervalului. Câmpul are mereu o valoare, deci required nu are efect.

Glisorul nu afișează numărul ales. Pentru asta îl legi de un element <output> cu puțin JavaScript. Atributul list poate indica un <datalist> cu valori marcate pe glisor.

Atribute

Atribut	Descriere
`min / max`	Capetele intervalului (implicit 0 și 100).
`step`	Pasul de deplasare (implicit 1).
`value`	Poziția inițială; implicit mijlocul intervalului.
`list`	Id-ul unui `<datalist>` cu valori marcate pe glisor.

Exemple

Exemplul 1: Buget cu valoarea afișată în `<output>`

Evenimentul input actualizează numărul la fiecare mișcare a glisorului.

<label for="buget">Buget maxim (lei)</label>
<input type="range" id="buget" name="buget"
       min="500" max="5000" step="100" value="2000"
       oninput="afisare.value = this.value">
<output id="afisare" for="buget">2000</output> lei

Ce afișează browserul

Glisor cu butonul la aproximativ o treime din lungime și textul „2000 lei”.
Când tragi glisorul spre dreapta, textul se schimbă: 2100, 2200 ... până la 5000.

Exemplul 2: Valori marcate cu `<datalist>`

Browserele care suportă marcajele desenează linii mici sub glisor la valorile din listă.

<label for="volum">Volum</label>
<input type="range" id="volum" name="volum" list="trepte">
<datalist id="trepte">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

Ce afișează browserul

Glisor pornit de la mijloc (50), cu cinci marcaje sub el la 0, 25, 50, 75 și 100.

Greșeli frecvente

Folosirea glisorului pentru valori exacte (vârstă, cod, sumă de plată): e greu de nimerit o valoare anume, mai ales pe telefon.
Lipsa unei afișări a valorii: utilizatorul nu știe ce a ales dacă nu adaugi un <output> sau un text lângă glisor.
Așteptarea ca required să forțeze o alegere: glisorul are mereu o valoare, implicit mijlocul intervalului.

Comenzi înrudite

<input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.
<input type=number>: Câmpul pentru valori numerice, cu limite min și max, pas de creștere și butoane de mărire și micșorare.
<form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
<label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.

Ce face <input type=range>