Using multiple input sliders to change their own individual class

Issue

So basically the idea is to start a presentation of different fonts/typography with simple options the first one being the possibility to change the size of each font. So I tried a very non-economical logic by changing the querySelector with a class but it seems to only take the first input range slider that changes the whole body. My question is how can I make multiple input range sliders that can change specific things (here the example is size but later on I would like to add spacing, line height & width per font). So I don't know how to get around this and apply one input slider to a certain class?

document.querySelector('input').addEventListener('input', e => document.querySelector('.font_1').style.fontSize = e
  .target.value + 'em');
document.querySelector('input').addEventListener('input', e => document.querySelector('.font_2').style.fontSize = e
  .target.value + 'em');
document.querySelector('input').addEventListener('input', e => document.querySelector('.font_3').style.fontSize = e
  .target.value + 'em');
document.querySelector('input').addEventListener('input', e => document.querySelector('.font_4').style.fontSize = e
  .target.value + 'em');
document.querySelector('input').addEventListener('input', e => document.querySelector('.font_5').style.fontSize = e
  .target.value + 'em');
document.querySelector('input').addEventListener('input', e => document.querySelector('.font_6').style.fontSize = e
  .target.value + 'em');

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

<div class="container">
  <header>
    <label>Change font-size</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
    <p class="font_1">Some text that should dynamically change size.</p>
    <label>Change font-size</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
    <p class="font_2">Some text that should dynamically change size.</p>
    <label>Change font-size</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
    <p class="font_3">Some text that should dynamically change size.</p>
    <label>Change font-size</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
    <p class="font_4">Some text that should dynamically change size.</p>
    <label>Change font-size</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
    <p class="font_5">Some text that should dynamically change size.</p>
  </header>
</div>

Solution

I think a way to do it would be to add an identifier to each of the p elements. It could be a class, an id or event an attribute. Then you can also add an attribute to each of the inputs telling them which p element they should affect.

I have created a little snippet for you, where i use the class-to-change attribute on the inputs with the corresponding class name of the p element they should change.

Then we loop through the inputs and when an input changes we also change the font-size of the corresponding p element.

Both the html and js could use a bit of cleaning up (the different inputs shouldn't have the same id, we should use a class to select the inputs, catch possible errors on the js, ...), but i think you can handle that! 😉

const inputs = document.querySelectorAll('input');

inputs.forEach((input) => {
  input.addEventListener('change', handleInputChange);
})

function handleInputChange(event) {
  const classToChange = event.target.getAttribute('class-to-change');
  const propertyToChange = event.target.getAttribute('property-to-change');
  const targetPElement = document.querySelector(`.${classToChange}`);
  
  targetPElement.style[propertyToChange] = `${event.target.value}em`;
}

<header>
      <label>Change font-size</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_1" property-to-change="fontSize"/>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_1" property-to-change="letterSpacing"/>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_1" property-to-change="lineHeight"/>
      <p class="font_1">Some text that should dynamically change size.</p>
      <label>Change font-size</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_2" property-to-change="fontSize"/>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_2" property-to-change="letterSpacing"/>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_2" property-to-change="lineHeight"/>
      <p class="font_2">Some text that should dynamically change size.</p>
      <label>Change font-size</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_3"/>
      <p class="font_3">Some text that should dynamically change size.</p>
      <label>Change font-size</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_4"/>
      <p class="font_4">Some text that should dynamically change size.</p>
      <label>Change font-size</label>
      <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" class-to-change="font_5"/>
      <p class="font_5">Some text that should dynamically change size.</p>
    </header>

Answered By - Boguz