如何在javascript中通过移动滑块来增加圆圈中的行数

<input type="range" id="slider" min="1" max="10" value="5">
<div id="circle-container"></div>

#slider {
  width: 300px;
}

.circle {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
  margin: 10px;
  display: inline-block;
}

// 获取滑块和圆圈容器元素
const slider = document.getElementById('slider');
const circleContainer = document.getElementById('circle-container');

// 监听滑块值的变化
slider.addEventListener('input', function() {
  // 获取滑块的值
  const value = parseInt(slider.value);
  
  // 清空圆圈容器
  circleContainer.innerHTML = '';
  
  // 根据滑块值生成相应数量的圆圈
  for (let i = 0; i < value; i++) {
    const circle = document.createElement('div');
    circle.className = 'circle';
    circleContainer.appendChild(circle);
  }
});