JavaScript实现美化滑块效果

2019-11-19 11:32:07

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现美化滑块效果的具体代码，供大家参考，具体内容如下

美化滑块（拖动）

隐藏原有的range 同步value

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>滑块</title>  <style>    .len{      width: 300px;      height: 6px;      background: #6c6;      border-radius: 3px;      margin-top:15px;      position: relative;    }    .len b{      display: inline-block;      height: 6px;      border-radius: 3px;      background: #900;      position: absolute;    }    .len span{      position: absolute;      width: 10px;      height: 10px;       border-radius: 5px;      background: #090;      z-index: 1;      top: -2px;      left: 0;    }    .len input[type=range]{      display: none;    }  </style></head><body>  <input type="range" min="0" max="500" value="0">  <input type="range" min="0" value="0">  <script>    var ranges=document.querySelectorAll("input[type=range]");    ranges.forEach(function(range){      var Div=document.createElement("div");      Div.className="len";      range.parentNode.insertBefore(Div,range);      var span=document.createElement("span");      var b=document.createElement("b");      Div.appendChild(span);      Div.appendChild(b);      Div.appendChild(range);      span.onmousedown=function(e){        var x=e.clientX-this.offsetLeft;        var maxL=Div.offsetWidth-span.offsetWidth;        var maxV=range.max || 100;        document.onmousemove=function(e){          var les=e.clientX-x;          if(les < 0)les=0;          if(les > maxL)les=maxL;          span.style.left=les+"px";          b.style.width=les+span.offsetWidth/2+"px";          range.value=les/maxL*maxV;   //同步          e.preventDefault();       //阻止默认事件          console.log(range.value)        }        document.onmouseup=function(){          document.onmousemove=null;          document.onmouseup=null;        }      }    })  </script></body></html>

插件都可以无限复制，删除即是原有效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JavaScript实现星级评价效果

下一篇：vue中使用mxgraph的方法实例代码详解