Dall'archivio script > HTML5

Visualizzare uno slider con il controllo range ed il tag output di HTML5

di Andrea ColaciAndrea Colaci,

Tra i nuovi controlli input, introdotti da HTML5, esiste il controllo range, studiato per consentire all'utente di selezionare un valore numerico compreso all'interno di un intervallo di 2 numeri min e max.
Questo controllo rappresenta graficamente il valore selezionato, variabile trascinando il cursore in orizzontale e mimando lo il comportamento di un "regolatore". L'aspetto del controllo varia a seconda del vendor (N.B. Firefox non lo supporta), a questo indirizzo è possibile verificare la copertura dei vendor e delle rispettive versioni che supportano il controllo range: http://caniuse.com/#search=range

Nell'esempio seguente, utilizziamo il controllo range per gestire l'input di un valore, forzando l'utente a rispettare un intervallo ed un passo/taglio incrementale consentito:

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Range e Output</title>
</head>
<body>
  <label for="slider" >Durata noleggio:</label>
  <input id="sliderMesi" type="range" min="12" max="36" step="1" value="12" onchange="durata.value=value + ' mesi'">
  <output id="durata" for="sliderMesi">12 mesi</output>
</body>
</html>


In questo breve esempio abbiamo utilizzato un nuovo tag: output, che introduce la possibilità di indicare semanticamente il risultato di un calcolo/operazione o, come in questo caso, il valore appunto di "output" un controllo.

Maggiori dettagli sul controllo range sono disponibili qui: http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-(type=range)

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi