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

Размер текста (

14

px)

Поле с ползунком имеет класс 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;
}

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