Formulários do jQuery Mobile - Deslizador

Controle de deslizador do jQuery Mobile

O deslizador permite que você selecione um valor dentro de um intervalo de números:

Para criar um deslizador, use <input type="range">:

Exemplo

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

Experimente você mesmo

Use as seguintes propriedades para definir limites:

  • max - define o valor máximo permitido
  • min - define o valor mínimo permitido
  • step - define o intervalo numérico válido
  • value - define o valor padrão

Dica:Se você desejar destacar a faixa de valor do deslizador, adicione data-highlight="true":

Exemplo

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

Experimente você mesmo

Interruptor de alternância

O interruptor de alternância é frequentemente usado para botões de liga/desliga ou sim/não:

Para criar um interruptor, use o elemento <select> com data-role="slider" e adicione dois elementos <option>:

Exemplo

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

Experimente você mesmo

Dica:Dica: Use a propriedade "selected" para definir uma opção como pré-selecionada (destacada):

Exemplo

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

Experimente você mesmo