我正在尝试创建一个交互式模式，用户可以在其中定制一些设计元素。我希望实现一个范围滑块，该滑块将元素重复一定次数。
例如，当输入值= 1时，出现一个点。当输入值= 100时，出现100个点，依此类推。
到目前为止，我的模式（点）是通过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）
}
我的范围滑块会影响容器的对比度，饱和度和亮度。 我不确定如何最好地利用范围滑块中的值来发挥自己的优势。我应该使用forLoop吗？
如何在输入范围内操作CSS值？
在此先感谢您的帮助！
下面的完整代码：