滑动条
重要程度: 5
创建一个滑动条（slider）：
用鼠标拖动蓝色的滑块（thumb）并移动它。
重要的细节：
- 当鼠标按钮被按下时，在滑动过程中，鼠标指针可能会移动到滑块的上方或下方。此时滑块仍会继续移动（方便用户）。
- 如果鼠标非常快地向左边或者向右边移动，那么滑块应该恰好停在边缘。
正如我们从 HTML/CSS 中所看到的，滑动条就是一个带有彩色背景的 <div>，其中包含一个滑块 —— 另一个具有 position:relative 的 <div>。
为了对滑块进行定位，我们使用 position:relative 来提供相对于其父元素的坐标，在这儿它比 position:absolute 更方便。
然后我们通过限制宽度来实现仅水平方向的拖放。