为什么我的垂直音量条不起作用？

Question

我正在尝试制作一个垂直滑块来控制背景音频的音量，它应该可以工作，但我有两个问题：一个是由于某种原因它不跟随鼠标位置，另一个是拖动的大问题。第一次拖动不显示，但是一旦我再次拖动它就不会在释放鼠标时停止，而且我无法单击页面中的其余内容。谁能帮我解决这个问题？我仍然是 Javascript 的初学者。提前致谢！

var e = document.querySelector('.volume-slider-con');
var eInner = document.querySelector('.volume-slider');
var audio = document.querySelector('audio');
var drag = false;
e.addEventListener('mouseup',function(ev){
   drag = true;
   updateBar(ev.clientY);
});
document.addEventListener('mousemove',function(ev){
   if(drag){
      updateBar(ev.clientY); 
   }
});
document.addEventListener('mousdown',function(ev){
 drag = false; 
});
var updateBar = function (y, vol) {
   var volume = e;
        var percentage;
        if (vol) {
            percentage = vol * 100;
        } else {
            var position = y - volume.offsetTop;
            percentage = 100 - (25 * position / volume.clientHeight);
        }

        if (percentage > 100) {
            percentage = 100;
        }
        if (percentage < 0) {
            percentage = 0;
        }

        eInner.style.width = percentage +'%';
        audio.volume = percentage / 100;
};

.volume-slider-con{
  height:15px;
  width:10%;
    margin-top: 255px;
    margin-left: 106px;
     position:relative;
  background-color: #000000;
    transform: rotate(270deg);
    border-radius: 2px;
}
.volume-slider{
   height:100%;
   width:100%;
   position:relative;
   background-color: #ffffff;
    border-radius: 2px;
}

<div class="volume-slider-con">
<div class="volume-slider"></div>
</div>

Answer 1

您可以考虑使用 <input type="range"> 并使用 css 变换将其旋转 90 度，而不是完全从头开始构建一个。

然后您还可以使用事件侦听器对输入和更改执行操作。

只要滑块拇指滑过范围（拖动时）并且 returns 滑块位置的值持续不断，输入事件就会运行。一旦滑块被释放，on change 事件只运行一次。

为什么我的垂直音量条不起作用？

Why is my vertical volume bar not working?

javascript

slider

volume