Using multiple input sliders to change their own individual class-CodePudding

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 >
  <header>
    <label>Change font-size</label>
    <input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
    <p >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 >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 >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 >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 >Some text that should dynamically change size.</p>
  </header>
</div>

CodePudding user response：

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!