Формы - Ползунок jQuery Mobile

Контроллер ползунка jQuery Mobile

Ползунок позволяет выбрать значение из определенного диапазона чисел:

Чтобы создать ползунок, используйте элемент <input type="range">:

Пример

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

Попробуйте сами

Используйте следующие атрибуты для ограничения:

  • max - определяет максимальное разрешенное значение
  • min - определяет минимальное разрешенное значение
  • step - определяет разрешенный интервал чисел
  • value - определяет значение по умолчанию

Совет:Если вы хотите выделить этот отрезок до значения ползунка, добавьте data-highlight="true":

Пример

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

Попробуйте сами

Переключатель

Переключатели часто используются для включения/выключения или да/нет кнопок:

Чтобы создать переключатель, используйте элемент <select> с атрибутом data-role="slider" и добавьте два элемента <option>:

Пример

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="switch">Переключатель:</label>
    <select name="switch" id="switch" data-role="slider">
      <option value="on">Вкл.</option>
      <option value="off">Off</option>
    </select>
  </div>
</form>

Попробуйте сами

Совет:Используйте атрибут "selected", чтобы установить один из вариантов как предварительно выбранный (выделенный):

Пример

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

Попробуйте сами