Виджет Rangeslider

Ползунок диапазона

Виджет rangeslider можно рассматривать как ползунок с двумя ручками. Чтобы добавить виджет rangeslider на вашу страницу, используйте два стандартных поля ввода с атрибутом type="range", и поместите их в контейнер <div>. Значения ввода используются для настройки начального положения ручек, и значения отображаются в соответствующих текстовых полях (первое — в начале ползунка, второе — в конце).

Укажите значения атрибутов min и max, чтобы установить диапазон ползунка. Если вы хотите ограничить ввод определёнными приращениями, добавьте атрибут step. Установите атрибут value в каждом поле ввода, чтобы определить их начальное значение. Фреймворк обработает эти атрибуты для настройки виджета rangeslider.

При перетаскивании ручек ползунка, фреймворк будет обновлять значения исходных полей ввода (и наоборот), чтобы они всегда были синхронизированы; это гарантирует, что значения будут отправлены вместе с формой.

Установите атрибут for контейнера labels в соответствии с атрибутом ids элемента inputs, чтобы они были семантически связаны. Можно скрывать подписи, если они не нужны в макете страницы, но мы требуем их присутствие в разметке для семантических и доступных причин.

Фреймворк найдёт все элементы input с атрибутом type="range" и автоматически преобразует их в ползунок с сопровождающим полем ввода, без необходимости применения атрибута data-role. Чтобы предотвратить автоматическое преобразование этого поля ввода в ползунок, добавьте атрибут data-role="none" в поля ввода.

• ui-rangeslider: Внешний контейнер для rangeslider.
  • ui-slider-popup: Элемент всплывающей подсказки, если data-popup-enabled равен true
  • ui-slider-first: Элемент поля ввода для начального диапазона rangeslider
  • ui-slider-last: Элемент поля ввода для конечного диапазона rangeslider
  • ui-rangeslider-sliders: Ползунки для rangeslider

В этом примере допустимый диапазон составляет 0-100.

<div data-role="rangeslider">
  <label for="range-1a">Rangeslider:</label>
  <input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" />
  <label for="range-1b">Rangeslider:</label>
  <input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range" />
</div>

Ползунок rangeslider по умолчанию с этими настройками отображается так:

Приращение шага

Чтобы принудительно установить диапазон с определённым приращением, добавьте атрибут step в поле ввода. По умолчанию шаг равен 1, но в этом примере шаг равен 0,1, а максимальное значение — 10.

В этом примере допустимый диапазон составляет 0-100.

<div data-role="rangeslider">
  <label for="range-10a">Rangeslider:</label>
  <input name="range-10a" id="range-10a" min="0" max="10" step=".1" value="0" type="range" />
  <label for="range-10b">Rangeslider:</label>
  <input name="range-10b" id="range-10b" min="0" max="10" step=".1" value="10" type="range" />
</div>

Это создаст поле ввода, которое будет «прилипать» к приращениям 0,1. Если к полю ввода добавлено значение, не соответствующее приращению шага, значение будет сброшено при потере фокуса до ближайшего значения шага.

Выделение области

По умолчанию есть выделение области между двумя ручками ползунка. Чтобы его убрать, добавьте атрибут data-highlight="false" в поле ввода. Выделение использует шрифт состояния «активный».

<div data-role="rangeslider" data-highlight="false">
  <label for="range-2a">Rangeslider (default is "true"):</label>
  <input name="range-2a" id="range-2a" min="0" max="100" value="0" type="range" />
  <label for="range-2b">Rangeslider:</label>
  <input name="range-2b" id="range-2b" min="0" max="100" value="100" type="range" />
</div>

Настройка темы ползунка

Чтобы установить тему для ползунка rangeslider, добавьте атрибут data-theme в inputs, который применит тему к полям ввода, ручкам и дорожке. Шрифт дорожки можно установить отдельно, добавив атрибут data-track-theme для применения варианта состояния «нажато» выбранного шрифта кнопки.

<div data-role="rangeslider" data-track-theme="a" data-theme="b">
  <label for="range-3a">Rangeslider:</label>
  <input name="range-3a" id="range-3a" min="0" max="100" value="0" type="range" />
  <label for="range-3b">Rangeslider:</label>
  <input name="range-3b" id="range-3b" min="0" max="100" value="100" type="range" />
</div>

Это создаст ползунок rangeslider с темой:

Мини-версия

Для более компактной версии, удобной в тулбарах и ограниченных пространствах, добавьте атрибут data-mini="true" к элементу для создания мини-версии.

<div data-role="rangeslider" data-mini="true">
  <label for="range-4a">Rangeslider:</label>
  <input name="range-4a" id="range-4a" min="0" max="100" value="0" type="range" />
  <label for="range-4b">Rangeslider:</label>
  <input name="range-4b" id="range-4b" min="0" max="100" value="100" type="range" />
</div>

Это создаст ползунок rangeslider и соответствующие поля ввода, которые будут меньше по высоте, чем стандартная версия. Поля ввода также имеют меньший размер текста.

Контейнеры полей

По желанию оберните разметку rangeslider в контейнер с классом ui-field-contain, чтобы помочь визуально сгруппировать её в длинной форме. В этом примере атрибут step опушен, чтобы позволить выбирать любые целые значения.

<div class="ui-field-contain">
  <div data-role="rangeslider">
    <label for="range-7a">Rangeslider:</label>
    <input name="range-7a" id="range-7a" min="0" max="100" value="0" type="range" />
    <label for="range-7b">Rangeslider:</label>
    <input name="range-7b" id="range-7b" min="0" max="100" value="100" type="range" />
  </div>
</div>

Ползунок rangeslider теперь отображается так:

Ползунки также реагируют на управляющие символы. Кнопки «Вправо», «Вверх» и «Страница Вверх» увеличивают значение; кнопки «Влево», «Вниз» и «Страница Вниз» уменьшают его. Чтобы переместить ползунок к минимальному или максимальному значению, используйте соответственно клавиши «Начало» или «Конец».

Вызов плагина rangeslider

Этот плагин будет автоматически инициализирован на любой странице, содержащей элемент div с атрибутом data-role="rangeslider". Однако, при необходимости, вы можете напрямую вызвать плагин rangeslider на любом селекторе, как и любой плагин jQuery:

$( "div#range-slider" ).rangeslider();