先看成品：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .v-range-box{ position:fixed; top:50%; left:50%; display:inline-block; background:rgba(0,0,0,0.2); height:46px; line-height:46px; border-radius:5px; padding: 0 15px; transform: rotateZ(-90deg); } .v-range-box::before{ content:""; position:absolute; top:15px; left:-8px; display:inline-block; width:0px; height:0px; border-right-width:8px; border-right-style:solid; border-right-color:rgba(0,0,0,0.2); border-top-width:8px; border-top-style:solid; border-top-color:transparent; border-bottom-width:8px; border-bottom-style:solid; border-bottom-color:transparent; } .v-range { -webkit-appearance: none; width:120px; height:5px; position:relative; top:-3px; border-radius:5px; background:linear-gradient(to right,#4dd3d2,#4dd3d2) no-repeat; background-size:50%,100%; } .v-range::-webkit-slider-thumb { -webkit-appearance: none; width:15px; height:15px; background:#f5f5f5; border-radius:50%; margin-top:-5px; } .v-range::-webkit-slider-runnable-track{ -webkit-appearance:none; height:6px; border-radius: 3px; border:none; box-shadow: inset 0px 0px 6px #94969b; } .v-range:focus{ outline:none; } </style> </head> <body> <div class="v-range-box"> <input class="v-range" id="rangeId" type="range" value="50" max="100" min="0" step="10" /> </div> <script> var ran = document.getElementById("rangeId"); //获取滑块对象，方便调整音量大小 rangeSlider(ran,{min:0,max:100,step:5,callback:function(){}}); function rangeSlider(rangeElem, { min, max, step, callback }) { min = !isNaN(parseFloat(min)) ? Number(min) : null; max = !isNaN(parseFloat(max)) ? Number(max) : null; step = !isNaN(parseFloat(step)) ? Number(step) : 1; callback = callback ? callback : null; rangeElem.setAttribute("min", min); rangeElem.setAttribute("max", max); rangeElem.setAttribute("step", step); rangeElem.addEventListener("input", function(e) { var that = e.target; that.style.backgroundSize = this.value + "% 100%"; if (typeof callback == "function") { callback(that); } }); } </script> </body> </html>