Работа с диапазонами на HTML5 веб-страницах

Введение

Часто нужно обеспечить пользователям возможность выбора значения из допустимого диапазона. Чтобы облегчить этот процесс для пользователей, спецификация HTML5 поддерживает диапазон в качестве элементов ввода данных.

Чтобы воспроизвести эффект диапазона/ползунка на веб-страницах, разработчики использовали Javascript или пользовательский плагин. Но HTML5 непосредственно поддерживает ввод данных через диапазон.

В спецификации HTML5 говорится

Спецификация HTML5 описывает диапазон, как атрибут типа элементов ввода данных со значением “range”, который предоставляет возможность гибкого управления процессом определения значения элемента в строке, представляющей число.

Для элемента ввода, который имеет тип “range”, допускаются следующие атрибуты:

  • Name (строка);
  • Disabled;
  • Form – принимает значение id формы;
  • Autocomplete – значения — “on” или “off”;
  • Autofocus;
  • List – значение id атрибута в списке значений атрибута;
  • Minfloat;
  • Maxfloat;
  • Step — значение — «any» или положительное число с плавающей запятой.

Элемент ввода с типом “range” может быть дочерним для любого основного элемента.

Ближе к делу

Пример синтаксиса:

<input id=”myRange” type=”range”>

Ниже приведена простая HTML5 веб-страница, иллюстрирующая этот элемент управления:

<!DOCTYPE html>
<html>
<body>
    <header>
        <h1>Демонстрационный диапазон</h1>
        <p>Демо-версия, иллюстрирующая элемент ввода типа диапазон</p>
    </header>
    <footer>
        <h1></h1>
        <p>HTML Goodies</p>
    </footer>
    Диапазон
<input id="example1" type="range" min="1" max="100" step="1" onchange="textbox1.value = example1.value" />
    <input id="textbox1" type="text" />
    <br>
 
    Пример диапазона 2
 <input id="example2" type="range" min="0" max="50" step="10" onchange="textbox2.value = example2.value" />
    <input id="textbox2" type="text" />
</body>
</html>

Когда страница отображается в браузере, который поддерживает HTML5, вы можете увидеть элемент управления range в действии.

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

Во втором слайдере допустимый минимальный шаг — 10.

В В Internet Explorer 11 эта страница отображается следующим образом:

Internet Explorer 11

В Google Chrome страница выглядит так.

В Google Chrome

Range поддерживают только ввод чисел.

Заключение

Из этой статьи вы узнали, как использовать на веб-страницах элементы ввода данных типа диапазон для имитации слайдера.

Перевод статьи «Working with Ranges in Your HTML5 Web Pages» был подготовлен дружной командой проекта Сайтостроение от А до Я.