Javascript 如何使用范围滑块输入值复制或克隆元素？

我试图创建一个交互模式，用户可以自定义设计元素的数量。我期待实现一个范围滑块，将重复元素的一定次数

例如，当输入值=1时，将显示一个点。当输入值=100时，将显示100个点，以此类推

到目前为止，我的图案（点）随setTimeout随机加载：

对于（变量i=0；i<35；i++）{

setTimeout（函数（）{

var-top='calc（'+Math.round（Math.random（）*100）+'vh-10vw'）；
var left=Math.round（Math.random（）*95）+“vw”；
变量圆=``；
变量圆=``；
container.insertAdjacentHTML（'beforeend'，圆圈）；

}，50+10*i）

}

“我的范围”滑块会影响容器的对比度、饱和度和亮度我不确定如何最好地利用范围滑块的值来发挥我的优势。我应该使用forLoop吗？

如何使用输入范围操作css值

提前感谢您的帮助

完整代码如下：

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);