Ваш регулятор не работает, когда указатель находится не над регулятором. Почему бы не прослушивать событие mousemove по всему документу?
Я модифицировал ваш код, вот что получилось (плохо получилось)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Audio player volume control UI test</title>
</head>
<body>
<style>
#vol {
width: 10em; height: 1em;
background: #eee;
cursor: ew-resize;
}
#volCont {
background: red;
width: 50%; height: 100%;
}
</style>
<div id="vol">
<div id="volCont"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
let isPointerDown = false;
$("#vol").on("mousedown", volumeHandler);
$(document).on("mousemove", volumeHandler);
$(document).on("mouseup", volumeHandler);
function volumeHandler(event) {
if(event.type === "mousedown") isPointerDown = true;
if(event.type === "mouseup") isPointerDown = false;
if(!isPointerDown) return;
var width = $("#vol").width();
var volume = Math.min(Math.max(0, event.offsetX / width), 1);
$("#volCont").width(width * volume);
console.log(volume);
// audio.volume = volume;
}
</script>
</body>
</html>
Плохо, поскольку в случае, когда у вас 2 плеера и пользователь захочет двумя пальцами регулировать, то у него ничего не получится.
И вне окна не работает. И в HTML есть подобный элемент, так что выше даже "костыль"!
Можно использовать HTMLInputElement для этой цели
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Audio player volume control UI test</title>
</head>
<body>
<input type="range" min="0" max="1" step="any" id="vol">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#vol").on("input", function(event) {
var volume = event.target.value;
console.log(volume);
// audio.volume = volume;
});
</script>
</body>
</html>
