Formulir - Slider jQuery Mobile

Kendali Slider jQuery Mobile

Slider memungkinkan Anda memilih nilai dari rentang angka:

Untuk membuat slider, gunakan <input type="range">:

Contoh

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

Coba Sendiri

Gunakan atribut berikut untuk menentukan batasan:

  • max - menentukan nilai maksimum yang diizinkan
  • min - menentukan nilai minimum yang diizinkan
  • step - menentukan interval angka yang sah
  • value - menentukan nilai default

Petunjuk:Jika Anda ingin menonjolkan jalur nilai slider, tambahkan data-highlight="true":

Contoh

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

Coba Sendiri

Pengaturan yang berubah-berubah

Pengaturan yang berubah-berubah sering digunakan untuk tombol on/off atau benar/salah:

Untuk membuat pengaturan yang berubah-berubah, gunakan elemen <select> dengan data-role="slider" dan tambahkan dua elemen <option>:

Contoh

<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>

Coba Sendiri

Petunjuk:Petunjuk: Gunakan atribut "selected" untuk membuat salah satu opsi diisi sebelumnya (berwarna kemerahan):

Contoh

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

Coba Sendiri