JavaScript  »  Guide  »  Guida jQuery UI 

Gli slider (o controlli a scorrimento) sono abbastanza comuni nell'esperienza quotidiana di ognuno di noi, anche al di fuori del mondo digitale e delle interfacce dei PC.

Possono controllare il volume di una radio oppure la luminosità di una lampada e sono utilizzati solitamente per permettere la variazione lineare di un valore (almeno in apparenza). Questa familiarità del controllo lo rende molto più efficace di select e campi numerici.

In jQuery UI uno slider è attivabile su un elemento HTML con il codice seguente:

$('#slider').slider();

In questo modo verrà visualizzato uno slider con un cursore scorrevole e un valore impostabile fra 0 e 100 (esempio).

Opzioni

Le opzioni offerte per personalizzare lo slider vanno ad influire sul suo comportamento e sui valori accettati (documentazione ufficiale):

• min / max: (intero - 0/100)
  indicano rispettivamente i valori minimo e massimo impostabili con lo slider. I valori possono essere anche negativi.
• orientation: (stringa - 'horizontal')
  imposta l'orientamento dello slider, se impostato su 'vertical' la barra principale verrà mostrata verticalmente e i valori andranno dal minimo in basso al massimo in alto.
• range: (booleano - false)
  se impostato su true, permette di impostare due cursori in modo da poter definire un intervallo di valori.
• value: (intero - 0)
  imposta il valore iniziale del cursore dello slider. Se usato insieme all'opzione range impostata su true, il valore passato sarà impostato sul primo cursore.
• values: (array - null)
  accetta un array di due numeri con i quali impostare i valori iniziali dei cursori. È utilizzabile solo se l'opzione range è impostata su true
• step: (intero - 1)
  imposta un intervallo di valori selezionabili.

Ecco alcuni esempi esplicativi.

Eventi

È possibile interagire con i vari stati di slider grazie a quattro eventi:

• start / stop: come per altri widget questi due eventi vengono lanciati all'inizio ed alla fine del trascinamento del cursore dello slider.
• change: come per stop, questo evento viene lanciato alla fine del movimento del cursore, tuttavia intercetta anche eventuali modifiche al valore dello slider applicate via scripting (ad esempio con il metodo value).
• slide: viene lanciato durante il trascinamento del cursore. Può essere utilizzato, ad esempio, per aggiornare un campo testuale con il valore numerico impostato in tempo reale.

Tutte le funzioni associate agli eventi di slider accettano due argomenti: l'evento JavaScript nativo ed un oggetti ui con le seguenti proprietà:

• handle: l'oggetto DOM del cursore che l'utente sta trascinando.
• value: un intero indicante il valore attuale dello slider.

Metodi

Oltre ai metodi comuni a tutti i widget, slider offre due metodi aggiuntivi per impostare o ricavare i valori impostati dall'utente:

• value: attraverso questo metodo è possibile impostare o ricavare il valore di slider sotto forma di numero intero:
  

  //Ricava il valore
  $('.#slider').slider('value');
  //Imposta il valore
  $('.#slider').slider('value',25);
  

• values: si comporta come value ma viene utilizzato per slider con cursori multipli. Accetta come argomento il numero intero indicante l'indice (partendo da 0) del cursore su cui si vuole lavorare:

  //Imposta il valore del primo slider
  $('.#slider').slider('value',0,25);    
  

Altri articoli

Altre guide

Altre newsletter