今天小编分享的是用js实现调节音量滑块的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

首先，我们来看一下效果：

html代码：

<body><div class="all"><p>当前位置0%</p><div class="bar"><div class="box"></div></div></div></body>

css代码：

<style>.all {width: 500px;height: 80px;margin: 100px auto;position: relative;}.bar {width: 500px;height: 20px;border-radius: 10px;background: #aaa;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;cursor: pointer;}.box {width: 30px;height: 30px;background: #000;position: absolute;bottom: 0;top: 0;margin: auto 0;border-radius: 50%;cursor: pointer;transition: left 0.1s linear 0s;}</style>

js代码：

<script>var box = document.getElementsByClassName('box')[0]var bar = document.getElementsByClassName('bar')[0]var all = document.getElementsByClassName('all')[0]var p = document.getElementsByTagName('p')[0]var cha = bar.offsetWidth - box.offsetWidthbox.onmousedown = function (ev) {let boxL = box.offsetLeftlet e = ev || window.event //兼容性let mouseX = e.clientX //鼠标按下的位置window.onmousemove = function (ev) {let e = ev || window.eventlet moveL = e.clientX - mouseX //鼠标移动的距离let newL = boxL + moveL //left值// 判断最大值和最小值if (newL < 0) {newL = 0}if (newL >= cha) {newL = cha}// 改变left值box.style.left = newL + 'px'// 计算比例let bili = newL / cha * 100p.innerHTML = '当前位置' + Math.ceil(bili) + '%'return false //取消默认事件}window.onmouseup = function () {window.onmousemove = false //解绑移动事件return false}return false};// 点击音量条bar.onclick = function (ev) {let left = ev.clientX - all.offsetLeft - box.offsetWidth / 2if (left < 0) {left = 0}if (left >= cha) {left = cha}box.style.left = left + 'px'let bili = left / cha * 100p.innerHTML = '当前位置' + Math.ceil(bili) + '%'console.log(left)return false}</script>

关于用js实现调节音量滑块的方法就分享到这里了，当然并不止以上和大家分析的办法，不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。