Formularios de jQuery Mobile - Deslizante

Controlador de deslizador de jQuery Mobile

El deslizador le permite seleccionar un valor de un rango de números:

Para crear un deslizador, utilice <input type="range">:

Ejemplo

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

Prueba personalmente

Utilice las siguientes propiedades para definir los límites:

  • max - Define el valor máximo permitido
  • min - Define el valor mínimo permitido
  • step - Define el intervalo numérico válido
  • value - Define el valor predeterminado

Consejo:Si desea resaltar la pista del valor final del deslizador, agregue data-highlight="true":

Ejemplo

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

Prueba personalmente

Interruptor de conmutación

El interruptor de conmutación se utiliza comúnmente para botones de encendido/apagado o verdadero/falso:

Para crear un interruptor, utilice el elemento <select> con data-role="slider" y agregue dos elementos <option>:

Ejemplo

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

Prueba personalmente

Consejo:Consejo: Utilice la propiedad "seleccionado" para establecer una opción como predeterminada (resaltada):

Ejemplo

<option value="off" seleccionado>Opción</option>

Prueba personalmente