<input type="range">

Gli elementi <input> di tipo range consentono all'utente di specificare un valore numerico che non deve essere inferiore a un dato valore e non superiore a un altro dato valore. Il valore preciso, tuttavia, non è considerato importante. Questo è in genere rappresentato utilizzando un dispositivo di scorrimento o un controllo di composizione anziché una casella di immissione di testo come <input type="number">.

Poiché questo tipo di widget è impreciso, dovrebbe essere utilizzato solo se il valore esatto del controllo non è importante.

Se il browser dell'utente non supporta <input type="range">, ricadrà e lo tratterà come <input type="text">.

Convalida

Non è disponibile alcuna convalida del modello; tuttavia, vengono eseguite le seguenti forme di validazione automatica:

• Se value è impostato su qualcosa che non può essere convertito in un numero a virgola mobile valido, la convalida non riesce perché l'input soffre di un input errato.
• Il valore non sarà inferiore a min. Il valore predefinito è 0.
• Il valore non sarà maggiore di max. Il valore predefinito è 100.
• Il valore sarà un multiplo di step. Il valore predefinito è 1.

Valore

L'attributo value contiene una stringa che contiene una rappresentazione di stringa del numero selezionato. Il valore non è mai una stringa vuota (""). Il valore predefinito è a metà strada tra il minimo e il massimo specificati, a meno che il massimo non sia effettivamente inferiore al minimo, nel qual caso il valore predefinito è impostato sul valore dell'attributo min. L'algoritmo per determinare il valore predefinito è:

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

Se si tenta di impostare il valore inferiore al minimo, questo viene impostato al minimo. Allo stesso modo, un tentativo di impostare un valore superiore al massimo comporta l'impostazione del valore massimo.

Attributi aggiuntivi

Oltre agli attributi condivisi da tutti gli elementi <input>, gli input di intervallo offrono i seguenti attributi.

list

I valori dell'attributo list sono quelli id di un elemento <datalist> che si trova nello stesso documento. <datalist> fornisce un elenco di valori predefiniti da suggerire all'utente per questo input. Eventuali valori nell'elenco che non sono compatibili con typenon sono inclusi nelle opzioni suggerite. I valori forniti sono suggerimenti, non requisiti: gli utenti possono selezionare da questo elenco predefinito o fornire un valore diverso.

max

Il valore massimo nell'intervallo di valori consentiti. Se il valore immesso nell'elemento supera questo valore, l'elemento non supera la convalida del vincolo. Se il valore dell'attributo max non è un numero, l'elemento non ha un valore massimo.

Questo valore deve essere maggiore o uguale al valore dell'attributo min.

min

Il valore più basso nell'intervallo di valori consentiti. Se il valore dell'elemento è inferiore a questo, l'elemento non supera la convalida del vincolo. Se viene specificato un valore min che non è un numero valido, l'input non ha un valore minimo.

Questo valore deve essere minore o uguale al valore dell'attributo max.

step

L'attributo step è un numero che specifica la granularità a cui deve attenersi il valore o il valore speciale any, descritto di seguito. Sono validi solo i valori che sono uguali alla base per lo stepping (min se specificato, value altrimenti, e un valore predefinito appropriato se nessuno di questi è fornito).

Un valore stringa di anysignifica che non è implicito alcun passaggio e qualsiasi valore è consentito (salvo altri vincoli, come min e max).

Attributi non standard

orient

Simile alla proprietà CSS non standard -moz-orient che influisce sugli elementi <progress> e <meter>, l' attributo orient definisce l'orientamento del dispositivo di scorrimento dell'intervallo. I valori includono horizontal, che significa che l'intervallo viene visualizzato orizzontalmente, evertical, dove l'intervallo viene visualizzato verticalmente.

Esempi

Sebbene <input type="number"> consenta agli utenti di immettere un numero con vincoli facoltativi che obbligano il loro valore a essere compreso tra un valore minimo e un valore massimo, è necessario che inseriscano un valore specifico. <input type="range"> ti consente di chiedere all'utente un valore nei casi in cui all'utente potrebbe non interessare o sapere quale sia il valore numerico specifico selezionato.

Alcuni esempi di situazioni in cui vengono comunemente utilizzati input di intervallo:

• Controlli audio come volume e bilanciamento o controlli del filtro.
• Controlli di configurazione del colore come canali di colore, trasparenza, luminosità, ecc.
• Controlli di configurazione del gioco come difficoltà, distanza di visibilità, dimensione del mondo e così via.
• Lunghezza della password per le password generate da un gestore di password.

Di norma, se è più probabile che l'utente sia interessato alla percentuale della distanza tra i valori minimo e massimo rispetto al numero effettivo stesso, un input di intervallo è un ottimo candidato. Ad esempio, nel caso di un controllo del volume stereo domestico, gli utenti in genere pensano "impostare il volume a metà del massimo" invece di "impostare il volume su 0,5".

Specificare il minimo e il massimo

Per impostazione predefinita, il minimo è 0 e il massimo è 100. Se non è quello che vuoi, puoi facilmente specificare limiti diversi modificando i valori degli attributi min e/o max. Questi possono essere qualsiasi valore a virgola mobile.

Ad esempio, per chiedere all'utente un valore compreso tra -10 e 10, puoi utilizzare:

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

Impostazione della granularità del valore

Per impostazione predefinita, la granularità è 1, il che significa che il valore è sempre un numero intero. È possibile modificare l' attributo step per controllare la granularità. Ad esempio, se è necessario un valore compreso tra 5 e 10, con una precisione di due decimali, è necessario impostare il valore di step su 0,01:

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

Se vuoi accettare qualsiasi valore indipendentemente da quante posizioni decimali si estende, puoi specificare un valore any per l'attributo step:

<input type="range" min="0" max="3.14" step="any">