Form jQuery Mobile - Slider

Controllo slider jQuery Mobile

Lo slider consente di selezionare un valore da un intervallo numerico specifico:

Per creare uno slider, utilizzare l'elemento <input type="range">:

Esempio

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="points">Punti:</label>
    <input type="range" name="points" id="points" value="50" min="0" max="100">
  </div>
</form>

Prova da Solo

Utilizzare le seguenti proprietà per stabilire i limiti:

  • max - stabilisce il valore massimo permesso
  • min - stabilisce il valore minimo permesso
  • step - stabilisce l'intervallo numerico legittimo
  • value - stabilisce il valore predefinito

Avviso:Se si desidera evidenziare la traccia del valore finale del dispositivo di scorrimento, aggiungere data-highlight="true":

Esempio

<input type="range" data-hightlight="true">

Prova da Solo

Selettore di commutazione

Il selettore di commutazione è spesso utilizzato per pulsanti di accensione/spegnimento o vero/falso:

Per creare un selettore di commutazione, utilizzare l'elemento <select> con data-role="slider" e aggiungere due elementi <option>:

Esempio

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Toggle Switch:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">On</option>
      <option value="off">Off</option>
    </select>
  </div>
</form>

Prova da Solo

Avviso:Suggerimento: Utilizzare l'attributo "selected" per impostare uno degli elementi come pre-selezionato (evidenziato):

Esempio

<option value="off" selected>Off</option>

Prova da Solo