jQuery Mobile Form - Slider

jQuery Mobile schuifregelaar component

De schuifregelaar laat je toe om een waarde uit een bepaald bereik te kiezen:

Voor het maken van een schuifregelaar, gebruik dan <input type="range">:

Example

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

Try It Yourself

Gebruik de volgende attributen om beperkingen in te stellen:

  • max - Stel het toegestane maximum in
  • min - Stel het toegestane minimum in
  • step - Stel de geldige numerieke intervallen in
  • value - Stel de standaardwaarde in

Hint:Als je de waarde van de schuifbalk wilt accentueren, voeg dan data-highlight="true" toe:

Example

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

Try It Yourself

Schakelaar

Schakelaars worden vaak gebruikt voor aan/uit of ja/nee knoppen:

Voor het maken van een schakelaar, gebruik dan het <select> element met data-role="slider" en voeg twee <option> elementen toe:

Example

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

Try It Yourself

Hint:Tip: Gebruik het "selected"-attribuut om een van de opties in te stellen als vooraf ingesteld (geaccentueerd):

Example

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

Try It Yourself