将“值”从滑块传递给元素，作为属性的参数

Question

I'm trying to capture an HTML slider value , which is suppose to set a parameter of an attribute (inside a CSS class).

So, i have a slider and a div element - to which i want to pass a value to:

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

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

In JS I've set those two elements as variables, and added Event Listener to the slider , with a function that captures value from the 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);
}

Now, i want to add a class to FGElement , inside of which i would put flex-grow: [i] . Which is my idea to how dynamically capture value from slider to FGElement .

Is it the right way to do it, if so - how to set an parameter of an CSS class attribute in JS?

If not, what would be the correct way...

Answer 1

You can't dynamically change values of .css file

You have to Use JS for to apply inline style

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