Передача «значения» из ползунка в элемент в качестве параметра атрибута

Question

Я пытаюсь захватить HTML slider value, который должен установить параметр атрибута (внутри класса CSS).

Итак, у меня есть slider и элемент div - которому я хочу передать значение:

<input type="range" min="1" max="11" value="6" class="slider" id="slider">

<div id="container">
     <div id="fg2">text</div>
</div>

В JS Я установил эти два элемента как переменные и добавил Event Listener к slider, с функцией, которая захватывает value из slider:

const slider = document.getElementById("slider")
const FGElement = document.getElementById("fg2");

slider.addEventListener("input", function(){
    changeSize();
});

function changeSize() {
    let i = slider.valueAsNumber;
    console.log(i);
}

Теперь я хочу добавить класс к FGElement, внутри которого я бы поместил flex-grow: [i]. Это моя идея, как динамически захватить value с slider до FGElement.

Правильно ли это сделать, если да - как установить параметр CSS class attribute в JS?

Если нет, что бы будь верным путем ...

Answer 1

Вы не можете динамически изменять значения .css файла

Вы должны использовать JS для применения встроенного стиля

document.getElementById('myElement').style.flexGrow = i;