Реализация слайдера и отображение значений в HTML5 без jQuery

Быстрый ответ

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

Вот простой пример реализации:

<input type="range" min="1" max="100" value="50" oninput="valueDisplay.textContent=this.value">
<span id="valueDisplay">50</span>

Таким образом, элемент valueDisplay немедленно отражает положение ползунка, и при этом нет необходимости писать дополнительный код на JavaScript.

Подсказки: динамическое обновление

Динамическое обновление в современных браузерах

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

<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="document.getElementById('textValue').value = this.value">
<input type="text" id="textValue" value="50">

Примечание: Этот метод корректно работает во всех современных браузерах.

Подробнее об этом расскажет наш спикер на видео

Поддержка доступности!

Следует уделять внимание доступности: использование тега <label> поможет программам чтения с экрана:

<label for="rangeInput">Регулировка громкости:</label>
<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="document.getElementById('textValue').value = this.value">
<input type="text" id="textValue" value="50" aria-live="polite">

Редактируемое число — новая подсказка

Если заменить элемент отображения значения на <input type="number">, пользователи смогут самостоятельно регулировать значение и сразу видеть изменения на ползунке:

<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="numberValue.value = this.value">
<input type="number" id="numberValue" value="50" oninput="rangeInput.value = this.value">

Примечание: Относитесь к вводимым пользователями данными с осторожностью!

Визуализация

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

      🔊
🔈-------🔉

На регуляторе есть маркеры с числовыми значениями, которые обозначают уровень громкости:

       100
0 ------- 50

Аналогично работает и ползунок range. Он плавно перемещается по диапазону значений, предоставляя визуальную обратную связь.

<input type="range" id="rangeSlider" min="0" max="100" value="50" oninput="this.nextElementSibling.value = this.value">
<output for="rangeSlider">50</output>

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

🎚️🔢: Вращайте, перемещайте, пробуйте — вам не придется догадываться о значении!

Стильно, модно, молодежно: сочетание двух подходов

Ставим стильные акценты

Добавьте немного индивидуальности вашему ползунку, стилизуя его с помощью CSS:

<input type="range" style="height:25px; background:#ddd;" oninput="valueDisplay.textContent=this.value">
<span id="valueDisplay">50</span>

В совершенстве кроются детали

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

#rangeValue {
  position: absolute;
  bottom: -25px;
  left: 50%; 
}

Отзывчивость — тенденция, ставшая классикой

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

@media screen and (max-width: 600px) {
  #rangeSlider {
    width: 100%;
  }
}

@media screen and (min-width: 601px) {
  #rangeSlider {
    width: 300px;
  }
}

Продвинутые техники и трюки

Использование клавиатуры

Добавьте поддержку управления ползунком при помощи клавиш клавиатуры, чтобы обеспечить максимальное удобство для пользователей, когда элемент находится в фокусе:

<input type="range" tabindex="0">

Примечание: Стрелки клавиатуры активны только при установленном фокусе на элементе!

Качественные реалии без jQuery

Обновить значения в реальном времени можно и без использования jQuery. Чистый JavaScript вполне способен справиться с этой задачей:

<input type="range" id="rangeInput" min="0" max="100" value="50" oninput="document.getElementById('textValue').value = this.value">
<input type="text" id="textValue" value="50">

Примечание: Если задачу можно решить просто, зачем усложнять?

Единицы измерения на стороне восприятия

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

<input type="range" oninput="updateValueWithUnit(this.value)">

function updateValueWithUnit(value){
  document.getElementById('valueDisplay').textContent = value + " единиц"; 
}

Примечание: Этот визуальный элемент улучшает восприятие информации на 200%. Просто возьмите на вооружение этот факт.

Полезные материалы

1. <input type="range"> – HTML: HyperText Markup Language | MDN — справочник MDN с полной информацией и примерами использования HTML5 range input.
2. Styling Cross-Browser Compatible Range Inputs with CSS | CSS-Tricks — тонкости кроссбраузерной стилизации range input.
3. HTML DOM Input Range Object — обзор возможностей манипулирования ползунками range с использованием JavaScript.
4. Color Viewer Slider Example | APG | WAI | W3C — примеры доступного дизайна ползунков с использованием ARIA-правил.
5. Forms, controls — подробности обработки событий для HTML-форм, включая range input.