有没有一个解决方案，字体大小滑块影响正文标签，但只需要它影响一些css类

<input type="range" id="font-size-slider" min="10" max="30" step="1">

<p class="affected-class">这是受影响的文本。</p>

.affected-class {
  font-size: 1rem; /* 默认字体大小 */
}

/* 根据滑块的值来调整字体大小 */
.font-size-10 {
  font-size: 1rem;
}

.font-size-11 {
  font-size: 1.1rem;
}

/* ... 继续定义其他字体大小类 */

.font-size-30 {
  font-size: 3rem;
}

const slider = document.getElementById('font-size-slider');
const affectedElement = document.querySelector('.affected-class');

slider.addEventListener('input', function() {
  const fontSize = this.value;
  affectedElement.className = 'affected-class font-size-' + fontSize;
});