До появления HTML5 думать о наличии ползунка диапазона на веб-странице было равносильно преступлению. Вам нужна была куча пользовательского кода javascript, но он все равно работал не на всех устройствах.
Тем не менее, HTML5 принес с собой множество новых атрибутов и функций, которые добавили изюминку, которую HTML упускал долгое время. Мало кто ожидал, что что-то вроде элемента диапазона появится в HTML5, но как только это произошло, вряд ли кто-то поднимал какие-либо опасения по поводу его работы. Создание чего-либо, близкого к элементу скользящего диапазона, требует множества строк кода в JavaScript, но того же можно добиться с помощью всего лишь одного элемента в HTML5. Как часто вы слышите, что в HTML можно что-то сделать лучше, чем в JavaScript?
Как следует из названия, наиболее распространенное использование <input> ползунка - это когда мы знаем самый низкий и самый высокий входы, которые могут быть даны в качестве ответа. Например, если мы разрабатываем веб-сайт, который разрешает доступ только пользователям возрастной группы 18-40 лет. Мы можем использовать год рождения в виде скользящего диапазона ввода с наименьшим значением 1981 г., а наибольшим - 2003 г. Ввод с помощью ползунка представляет собой интуитивно понятный пользовательский интерфейс, который выступает в качестве альтернативы вводу простого текстового поля или раскрывающемуся списку с фиксированными значениями.
Ввод диапазона лучше всего подходит, если с ним связаны вычисления. Гибкость перемещения элементов управления и просмотра результата «вживую» не имеет себе равных.
Как создать элемент скользящего диапазона ввода в HTML?
Вот пример кода для создания элемента диапазона ввода:
<input name="weight" type="range" min="100" max="500" step="10"Вот ключевые атрибуты:
min (наименьшее допустимое значение в диапазоне)
max (максимальное допустимое значение в диапазоне)
step (значение шага увеличения/уменьшения по умолчанию равно 1)
value (начальное значение или значение по умолчанию для ползунка)
Отображение текущего значения
Элемент диапазона по умолчанию будет отображать только текущее положение ползунка, и пользователь должен угадать точное значение. Поэтому, чтобы избежать догадок, вы должны использовать одну из альтернатив для отображения текущего значения. Вот решение в основном HTML (хотя он использует Javascript в атрибуте).
Решение jQuery для отображения значений для всех элементов ввода диапазона
Более многоразовым решением было бы создать фрагмент jquery, который обрабатывает событие изменения для всех входных элементов диапазона. Вот код:
Отрицательные и десятичные значения во вводе диапазона
Да, вы можете иметь отрицательные и десятичные значения во вводе диапазона, см. ниже примеры: