Using multiple input sliders to change their own individual class

Question

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>

Answer 1

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>