回到课程

滑动条

重要程度: 5

创建一个滑动条(slider):

用鼠标拖动蓝色的滑块(thumb)并移动它。

重要的细节:

  • 当鼠标按钮被按下时,在滑动过程中,鼠标指针可能会移动到滑块的上方或下方。此时滑块仍会继续移动(方便用户)。
  • 如果鼠标非常快地向左边或者向右边移动,那么滑块应该恰好停在边缘。

打开一个任务沙箱。

正如我们从 HTML/CSS 中所看到的,滑动条就是一个带有彩色背景的 <div>,其中包含一个滑块 —— 另一个具有 position:relative<div>

为了对滑块进行定位,我们使用 position:relative 来提供相对于其父元素的坐标,在这儿它比 position:absolute 更方便。

然后我们通过限制宽度来实现仅水平方向的拖放。

使用沙箱打开解决方案。