自定义播放器需要写一些样式，控制音量的滑块一般改起来比较费劲，这里保存一个以便于以后拿来直接用，改的range标签

本文链接：https://blog.csdn.net/qq_38652871/article/details/96430907

先看成品：
在这里插入图片描述

<!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>