Windows 8 - Creare uno slider JQuery-UI senza l'utilizzo di tale libreria con HTML5/Javascript

In questi giorni mi sono trovato a risolvere un problema di compatibilità tra JQuery 2.0, JQuery-UI 1.10.3 e Windows 8 per la creazione di uno Slider, oggi voglio pubblicare la mia soluzione di modo che spero di aiutare qualcun'altro che potrebbe trovarsi in questa spiacevole situazione.
Iniziamo creando un progetto Windows Store con HTML5/Javascript, poi apriamo il Solution Explorer ed apriamo il file default.html modificandolo in questo modo:

Spiegazione: Nel body inseriamo un input di type=range che ci permetterà di creare lo slider, gli impostiamo un id per poterlo recuperare da js ed assegnarli uno style nel css ed infine alcuni attributi:

• value: è il valore iniziale dello slider, non può essere minore dell'attributo min;
• min: è il valore più piccolo che lo slider può assumere;
• max: è il valore più grande che lo slider può assumere;
• step: è il grado di spostamento della barra, cioè di quanto va incrementata o decrementata quando un utente ne cambia il valore;
• onchage: è l'handler che si occupa di gestire il cambiamento del valore dello slider.

Ora apriamo il file default.js ed aggiungiamo la seguente funzione:

Spiegazione: Ogni volta che l'utente incrementa o decrementa lo slider, controlliamo se abbiamo già creato un timer, se sì lo eliminiamo, altrimenti ne creiamo uno nuovo che eseguirà onSliderApply dopo 250 millisecondi.

Sempre nel default.js aggiungiamo la onSliderApply:

Spiegazione: Visualizziamo un messaggio con il valore assunto dallo slider ed elimino il timer per evitare che tale messaggio venga visualizzato più volte.

Infine apriamo il file default.css ed aggiungiamo uno style allo slider:

Spiegazione: Nello #slider impostiamo la larghezza e la posizione all'interno della finestra. Nello #slider::-ms-fill-lower invece cambiamo il colore della barra.

Salviamo ed eseguiamo.

Piaciuto?

Con questa piccola tecnica abbiamo riprodotto lo stesso slider che ci viene fornito con JQuery-UI, ma essendo tutto nativo, abbiamo eliminato i problemi di compatibilità.