html+js写个好看的滑动条

想给网页添加一个滑动条，于是查找资料找到了html5中input类型中的range，试着用了一下在各个浏览器的样式差别太大，而且不太好看。果断放弃，不如自己用 javascript写一个，效果图如下：

通过图片可以看出来用了 3 个 div
1、可以被鼠标拖拽的小人用来作为可以拖拽的按钮
2、整个可填充的 白色长条
3、可变化长度的 黑色长条

思路很简单：
一个可以鼠标拖拽的div，只能横向移动，移动的同时改变黑色长条的width。还要限制移动的范围只能在白色长条的范围内。

限制：
1、两个端点的数值跟鼠标的位置有关，会出现略微的抖动
2、不能用于移动端的设备，也不建议用于移动端，效果不好，就不放移动端的代码了
3、不能用于过于精细的操作中，两端的数值不是很准

css代码如下：（从新抽取的代码，有点丑）

html,
body {
    margin: 0px;
    height: 100%;
}
.tool{
    height: 20%;
    width: 100%;
    margin: auto;
    position: relative;
}
/*拖拽按钮的样式*/
#ball{
    height: 80%;
    width: 10%;
    position: absolute;
    left: 5%;
    cursor: move;
    background-color: #ff55ff;
    z-index: 1;
}
/*底层长条*/
#range{
    width: 90%;
    height: 20%;
    background-color: #00ffff;
    border-radius: 20px;
    position: absolute;
    bottom: 50%;
    left: 5%;
}
/*顶层长条*/
#rangeTop{
    width: 5%;
    height: 20%;
    background-color: #000000;
    border-radius: 20px;
    position: absolute;
    bottom: 50%;
    left: 5%;
}

html和js代码如下：

<div class="tool" id="rangeAll">
    <div id="ball"></div>
    <div id="range"></div>
    <div id="rangeTop"></div>
</div>

<script type="text/javascript">
    var body = document.getElementsByTagName("body")[0];
    //自定义range，好用，杠杠的
    var ball=document.getElementById("ball")
    var range=document.getElementById("range")
    var rangeTop=document.getElementById("rangeTop")
    //声明全局变量
    var leftCha,topCha;
    //定义鼠标是否按下的标识
    var isDown = false;

    ball.onmousedown = function(e){
             var e = e || window.event;
             leftCha = e.clientX - ball.offsetLeft;
             isDown = true;
    }
    window.onmousemove = function(e){
         var e = e || window.event;
         if(!isDown){
                 return;  //终止程序执行
         }
         if(ball.offsetLeft<range.offsetLeft){
             ball.style.left =range.offsetLeft+"px"
             isDown = false;
             return
         }
         if(ball.offsetLeft>range.offsetWidth){
             ball.style.left =range.offsetWidth+"px"
             isDown = false;
             return
         }
         
         ball.style.left = e.clientX - leftCha + 'px';
         rangeTop.style.width=ball.offsetLeft+"px"
         /*改变透明度，我用来改变亮度*/
         body.style.opacity=((range.offsetWidth-ball.offsetLeft*0.7)/range.offsetWidth)
             
    }
    ball.onmouseup = function(e){
             isDown = false;
    }               
</script>

改位置，改背景，改颜色，个人看着办。js中数值的绑定慢慢琢磨吧！