Hi,
I'm tinkering a way to control an audio file volume while sliding an object. I think the best way is to attach a mouse move or drag event to a function that changes the audio file volume.

I started trying to make the slider object (its an image) draggable,

$( "#obj98" ).draggable({
  drag: function( event, ui ) {
 
    console.log( ui.position.top );
  }
});

but the drag event never triggers, and I gives an error "TypeError: undefined is not an object (evaluating 'a.browser.msie')"

Then I tried to use jQuery mousemove, but I'm unable to get it work

$("#obj140").mousemove(function( event ) {
  console.log(event.pageX + ", " + event.pageY);
});

#obj140 is an interactive area.

Any suggestions to achieve this?

Found a way out: using the vanilla javascript mouse events:

let el = document.getElementById("obj140");
let slide = document.getElementById( "obj98" );
let azul = document.getElementById( "obj132" );

let isMoving = false;
let x = 0, y = 0;

el.addEventListener("mousedown", (e) => {
    console.log(e.offsetX, e.offsetY);
    y = e.offsetY;
    x = e.offsetX;
    isMoving = true;
});

el.addEventListener("mousemove", (e) => {
    if (isMoving) {
        let vol = 1 - (e.offsetY) / 144 ;
        console.log( e.offsetY, vol );
        slide.style.top = e.pageY + "px";
        azul.volume = vol;
    }
});


el.addEventListener("mouseup", (e) => {
    console.log(e.offsetX, e.offsetY);
    y = e.offsetY;
    x = e.offsetX;
    isMoving = false;
})

window.addEventListener('mouseup', function(event){
    isMoving = false;
})