滑块
重要性：5
创建一个滑块
用鼠标拖动蓝色滑块并移动它。
重要细节
- 当鼠标按钮被按下时，在拖动过程中，鼠标可能会移到滑块的上方或下方。滑块仍然可以工作（对用户来说很方便）。
- 如果鼠标快速向左或向右移动，滑块应该正好停在边缘。
从 HTML/CSS 代码中可以看出，滑块是一个带有彩色背景的 <div> 元素，其中包含一个滑块运行器 - 另一个带有 position:relative 属性的 <div> 元素。
为了定位滑块运行器，我们使用 position:relative 属性，以便提供相对于其父元素的坐标。在这里，它比 position:absolute 属性更方便。
然后，我们实现了一个仅限水平方向的拖放功能，并通过宽度进行限制。