• Теория
  • Теория

Получаем значение из поля с ползунком

Настройка цвета текста готова. Займёмся размером шрифта. Пользователь может изменять размер текста в статье, передвигая ползунок. Если сдвинуть ползунок влево, текст должен стать меньше, а если вправо — больше. Выбранный размер должен выводиться на страницу рядом с полем.

Поле с ползунком имеет класс size-setting. Вот как оно выглядит в разметке:

<input class="size-setting" type="range" min="8" max="48" step="1" value="14">

Ползунок позволяет выбрать число из указанного диапазона. В нашем случае это целое число от 8 до 48. Значение по умолчанию — 14, потому что размер шрифта в статье сейчас 14px. О том, как сверстать поле с ползунком, можно узнать, пройдя эту часть.

Значение, которое выбрал пользователь, получают в JavaScript с помощью свойства value. Это значение нам нужно вывести на страницу рядом с полем. Верстальщик подготовил для этого элемент <output> с классом pixels:

Размер текста (<output class="pixels">14</output>px)

Мы уже работали с элементом <output> в одной из прошлых частей. Запишем в его текстовое содержимое число, которое выбрал пользователь.

Нам нужно получать значение, когда пользователь передвигает ползунок. Используем обработчик событий onchange. Например:

// Находим поле и элемент для вывода значения
let range = document.querySelector('input');
let output = document.querySelector('output');

// Добавляем полю обработчик событий
range.onchange = function () {
  // Выводим значение на страницу
  output.textContent = range.value;
}

Найдём нужные элементы и выведем на страницу выбранный размер текста.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Динамические стили элементов» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.