How to duplicate or clone an element using the range slider input value?

I am trying to create an interactive pattern where the user can customize the number of design elements. I am looking to implement a range slider that would duplicate the element a certain number of times.

For example, when the input value = 1, one dot appears. When the input value = 100, 100 dots appear, and so forth.

So far, my pattern (dots) load in randomly with setTimeout:

for(var i = 0; i < 35; i++){

setTimeout(function(){

var top = 'calc(' + Math.round(Math.random()*100) + 'vh - 10vw)';
var left = Math.round(Math.random()*95) + 'vw';
    var circle = `<div class="circle" style="top: ${top}; left: ${left};" ></div>`;

var circle = `<div class="circle" style="top: ${top}; left: ${left};" ></div>`;
container.insertAdjacentHTML('beforeend', circle);

}, 50 + 10*i)

}

My range sliders impact the contrast, saturation and brightness of the container. I'm not sure how to best use the value from the range slider to my advantage here. Should I be using a forLoop?

How can I manipulate css values with the input range?

Thanks in advance for any help!

Full code below:

https://glitch.com/edit/?utm_content=project_pattern-3&utm_source=view_source&utm_medium=button&utm_campaign=glitchButton#!/pattern-3