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:
<!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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire undefined e partial nelle reactive forms di Angular
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Usare lo spread operator con i collection initializer in C#
Miglioramenti nell'accessibilità con Angular CDK
Migrare una service connection a workload identity federation in Azure DevOps
Usare un KeyedService di default in ASP.NET Core 8
Utilizzare Model as a Service su Microsoft Azure
C# 12: Cosa c'è di nuovo e interessante
Evitare il flickering dei componenti nel prerender di Blazor 8
Aggiungere interattività lato server in Blazor 8
Creare moduli CSS in React
Effettuare il deploy di immagini solo da container registry approvati in Kubernetes