Input type: range

Molto simile semanticamente all'input type=number, questo nuovo tipo di input permette agli utenti di inserire un numero tramite uno slider.

Attributi specifici

HTML5 mette a disposizione un set di attributi specifici per il tipo range (che sono gli stessi del type=number): servono a specificare delle limitazioni per il valore di questo attributo. Questi attributi sono min, max e step.

• min: specifica il minimo valore permesso. Esempio: min="1", che permette solo di passare numeri da 1 in su.
• max

: specifica il massimo valore permesso. Esempio: max="10", che permette solo di inviare numeri inferiori o uguali a 10. Il valore di questo attributo deve essere maggiore del valore dell'attributo min (se specificato).

• step: indica la granulosità che deve avere il value limitando i possibili valori passati. Il valore di step se specificato deve essere un numero (anche non intero) maggiore di zero oppure la stringa "any" (che equivale a non inserire l'attributo). Esempio: step=3, che influenza i valori inseriti passando valori come -3, 0, 3, 6.

Esempi d'uso

L'esempio è molto semplice, eccolo:

<form name="commenti" method="post" action="/141/comments">
  [...]
  <label>Voto:
    <input type="range" name="voto" min="0" max="5" step="1">
  </label>
  [...]
  <input type="reset"  value="Resetta il form">
  <input type="submit" value="Invia il commento">
</form>

Ecco come appare un input di tipo range sui browser che lo supportano:

Tabella del supporto sui browser

Form: nuovi tipi di input
range	No	No	4.0+	2.0+	9.0+