构建自定义音量滑块

Question

我发现了这个问题，并试图对其进行修复，因为其背后的逻辑与我要实现的逻辑相似。我已经设法以最少的编辑工作了。但它没有按预期工作。

注意：我已将点击功能注释掉，因为它可以正常工作。

怎么了

1. 如果单击，volumeBtn并且volumeRange在向左或向右滑动时不小心将光标移到div的高度或宽度之外，则mouseup当您停止单击鼠标时，事件监听器将不会执行。

2. 像1一样，单击后，一旦超出“ volumeRange” div的范围volumeBtn，就无法volumeBtn向左或向右拖动。

3. 从第零位置到所需位置存在闪烁。

我想发生什么

1. 如果单击，volumeBtn然后停止单击鼠标，则mouseup即使光标不再位于上，也应执行该事件volumeRange。

2. 如果单击，即使光标不再位于上，volumeBtn您也应该能够volumeBtn向左或向右拖动volumeRange。

  const volume = document.querySelector('.volume');

    const volumeRange = document.querySelector('.volume-range');

    const volumeBtn = document.querySelector('.volume-button');

    // volumeRange.addEventListener("click", volumeClick    );

    //     function volumeClick(event) {

    //         let x = event.offsetX;

    //         volume.style.width = (Math.floor(x) + 10) + 'px';

    //     }

        let mouseIsDown = false;

        volumeBtn.addEventListener("mouseup", up);

        volumeBtn.addEventListener("mousedown", down);

        volumeRange.addEventListener("mousemove", volumeSlide);

        function down(){ mouseIsDown = true; }

        function up(){ mouseIsDown = false; }

        function volumeSlide(event) {

            if (mouseIsDown) {

                let x = event.offsetX;

                console.log(x);

                volume.style.width = Math.floor(x + 10) + 'px';

            }

        }