带有提示文字的滚动条

思路：

• 首先设计出它的静态样式，为了更合理，应该将底下的文字提示框隐藏起来
• 大致效果如下：
  
• 其次利用鼠标事件来完成该案例，需要用到的鼠标事件有：onmousemove(鼠标拖动时触发的事件)、onmousedown(鼠标按下时触发的事件)、onmouseup(鼠标离开时触发的事件)
• 最后我们需要利用clientX属性先求出滚动条的起始临界X坐标的值，以防止出界
• 需要注意的是当鼠标按下或者是离开的时候，其滚动条底下的文字提示框都应该隐藏
• 现在看一下具体做法：

 <style>
        div {
            width: 25px;
            height: 25px;
            border: 1px solid black;
            line-height: 25px;
            text-align: center;
            position: absolute;
            display: none;
        }
</style>

 	<input type="range" min="0" max="100" value="5" />
    <div></div>

<script>
        //获得元素
        var input = document.querySelector('input');
        var div = document.querySelector('div');
        var flag = false;

        //当鼠标拖动时
        input.onmousemove = function() {
            if (flag) {
                // console.log('(x,y):('+event.clientX+','+event.clientY+')');
                //先求出滚动条X轴的起始坐标，以此来作为临界值
                var left = event.clientX;
                if (left > 135) {
                    left = 135;
                }
                if (left < 14) {
                    left = 14;
                }

                div.style.left = left + 'px';
                div.innerHTML = input.value;
                div.style.display = 'block';
            }
        }

        //当鼠标按下时，隐藏底下的文字提示框
        input.onmousedown = function() {
            flag = true;
            //console.log('(x,y):('+event.clientX+','+event.clientY+')');
            div.style.display = 'none';
        }

        //当鼠标松开时，隐藏底下的文字提示框
        input.onmouseup = function() {
            flag = false;
            div.style.display = 'none';
        }
</script>

最终效果图如下：

当然这个案例做得其实并不是很完善，其中还有很多小毛病，在这里也只是为了巩固自己学的基础知识