我想用滑块滑动/移动猫头鹰的圆点。

<input type="range" id="slider" min="0" max="100" step="1">
<div id="dot"></div>

#slider {
  width: 200px;
}

#dot {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: 0;
  transition: left 0.2s ease-in-out;
}

const slider = document.getElementById('slider');
const dot = document.getElementById('dot');

slider.addEventListener('input', function() {
  const value = slider.value;
  const newPosition = value * 2; // 根据滑块的值计算新位置，这里假设每个值对应2个像素
  dot.style.left = newPosition + 'px'; // 移动圆点到新位置
});