可以控制最大值、最小值、步长的兼容手机端的滑块

HTML

                    

                        
0
                        

                    

                

css

/*滑块样式---------------------*/
.lineDiv {
    position: relative;
    height: 200px;
    background: url(../../images/assessment/okbgS.png) no-repeat center;
    width: 3px;
    top: 6.5rem;
    left: 10.6rem;
   }
 
.lineDiv .minDiv {
    position: absolute;
    top: 200px;
    left: -1.42rem;
    width: 3rem;
    height: 2rem;
    text-align: center;
    background: url(../../images/assessment/btnUpH.png) no-repeat top center;
    background-size: 40%;
    cursor: pointer;
}
 
.lineDiv .vals {
    position: absolute;
    top: -1.2rem;
    left: -1.2rem;
    width: 2.5rem;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.6rem;
    text-align: center;
    background: url(../../images/assessment/cmXs.png) no-repeat center;
    background-size: 100%;
    color: #fff;
}

JS

var lineDiv = document.getElementById('lineDiv'); //长线条
        var minDiv = document.getElementById('minDiv'); //小方块
        var vals = document.getElementById("vals");
        var ifBool = false; //判断鼠标是否按下
        //事件
        var start = function(e) {
            e.stopPropagation();
            ifBool = true;
        }
        
        var move = function(e) {
            if(ifBool) {
                if(!e.touches) { //移动端
                    var x = e.clientY;
                } else {     //PC端
                    var x = e.touches[0].pageY;
                }
                var lineDiv_top = getPosition(lineDiv).top; //长线条的横坐标
                var minDiv_top = x - lineDiv_top; //小方块相对于父元素（长线条）的top值
                if(minDiv_top >= lineDiv.offsetHeight) {
                    minDiv_top = lineDiv.offsetHeight;
                }
                if(minDiv_top < 0) {
                    minDiv_top = 0;
                }
                //设置拖动后小方块的Top值
                minDiv.style.top = minDiv_top + "px";
                        
                var sume = (滑块最大值-滑块最小值)/步长;
                if(sume>=0){
                    console.log(minDiv_top);
                                vals.innerText = parseInt((滑块最大值/步长)-(minDiv_top* sume/滑块长度 ))*步长;
                       }

            }
        }
        var end = function(e) {
                ifBool = false;
            }
            //鼠标按下方块
        minDiv.addEventListener("touchstart", start);
        minDiv.addEventListener("mousedown", start);
        //拖动
        window.addEventListener("touchmove", move);
        window.addEventListener("mousemove", move);
        //鼠标松开
        window.addEventListener("touchend", end);
        window.addEventListener("mouseup", end);
        //获取元素的绝对位置
        function getPosition(node) {
            var top = node.offsetTop;
            current = node.offsetParent;
    
            　　
            while(current != null) {　　
                top += current.offsetTop;　　
                current = current.offsetParent;　　
            }
            return {
                "top": top
            };
        }
        
        //滑块-----------------------------------------------------------------