изменить большое количество элементов

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

ползунки:

            <div class="fontRedactor col-6">
              <div class="fontSize"><p class="fontRedactorP">размер шрифта:</p><input id="sliderSize" class="slider" type="range" min="1" step="1" max="10"></div>
              <div class="fontWidth"><p class="fontRedactorP">ширина шрифта:</p><input id="sliderWidth" class="slider" type="range" min="1" step="1" max="10"></div>
            </div>

код jquery: (попытался создать массив)

  let sliderSize = $("sliderSize");
  let changedText = [];
  $(".change").each(function() {
    changedText.push($(this));
  });
  console.log(changedText);
  sliderSize.addEventListener("input", function() {
      for(let i = 0; i < changedText.length; i++){
          changedText[i].style.fontSize = sliderSize + 'px';
      }
  })

присвоил всем необходимым элементам class='change'

не работает, в интернете не могу правильно загуглить, все меняют текст только одного блока а не многих