左右滑动条原理。？

我知道用音频元素的volume属性控制音量，我也知道实现的音量左右滑动条的基本思路是一个总音量条的父元素，一个显示当前音量条的子元素和一个显示圆点的子元素，利用mousedown和mousemove改变这两个元素的left属性和width属性，但是如何控制左0到右100，如何鼠标离开父元素区域后还能左右滑动，毫无思路，网上查了很久也没有多少介绍这种原理的。

回复内容：

一般对于拖动类的控件来说，要考虑基本的可用性，也就是说拖动操作时鼠标指针移出控件范围后这个拖动操作还不能断。

那么常见的做法就是在控件上绑定 mousedown ，事件触发之后在 document 上绑定 mousemove 和 mouseup ，在 mouseup 触发之后去掉上述两个监听器。

可能的话还应当考虑键盘操作的可用性。 圆点离开父元素还能滑动的是因为你没设定范围。在圆点滑动时要判断left是否在父元素范围内，离开范围马上清除绑定，不能只在鼠标mouseup时清除。