jQuery Mobile Form - Slider

jQuery Mobile Slider Control

Ang slider ay nagbibigay sa iyo ng kapangyarihan na piliin ang halaga mula sa isang saklaw ng bilang:

Kung gusto mong lumikha ng slider, gamitin ang <input type="range">:

Example

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

Try It Yourself

Ginamit ang sumusunod na attribute upang tukuyin ang limitasyon:

  • max - nagtutukoy sa pinakamalaking pinahihintulutang halaga
  • min - nagtutukoy sa pinakamaliit na pinahihintulutang halaga
  • step - nagtutukoy sa lehitimong pagkalabas ng bilang
  • value - nagtutukoy sa default na halaga

Hint:Kung gusto mong ipakita ang linya ng track ng naibigay na value ng slider, magdagdag ng data-highlight="true":

Example

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

Try It Yourself

Switch switch

Ang switch switch ay ginamit sa button na on/off o yes/no:

Kung gusto mong lumikha ng switch, gamitin ang elementong <select> na may data-role="slider", at magdagdag ng dalawang <option> element:

Example

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

Try It Yourself

Hint:Mga Tagubilin: Gamitin ang "selected" attribute upang itakda ang isang opsyon bilang pre-selected (nakapintuan):

Example

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

Try It Yourself