Passing "value" From Slider To An Element, As An Parameter Of An Attribute

I'm trying to capture an HTMLslidervalue, 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 CSSclassattribute in JS?

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

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;