How do I set animation frame based on mouse click and drag?

I have a sprite that is the image of a selector knob:

I also have a global variable called dragAndDropTest that will be renamed selectorKnobValue.

I am looking for a way to set the value of dragAndDropTest when clicking and dragging the mouse (not actually dragging because the sprite/knob wont move at all).

Moving the mouse left, dragAndDropTest is set to dragAndDropTest - 1.

Moving the mouse right, dragAndDropTest is set to dragAndDropTest + 1.

There is another condition checking that the value does not go below 0 and neither increases over the number of the last animation frame.

The X value of 795 represent the center of the button.

This partially works = When I click to the right of knob center, dragAndDropTest increases by one. Clicking to the left of knob center most of the time work as well, but it is not as consistent. Any idea why?

Wanted additional functionality: I want the user to be able to click and drag the knob, as this is expected functionality/behaviour when interacting with elements like this on a computer screen. Click knob, and drag left should decrease dragAndDropTest -1, while Click knob, drag right should increase dragAndDropTest +1.

Does anybody have suggestion on how to implement this mouse click+drag behaviour?

Check out this demo:

howtoconstructdemos.com/customizable-rotating-knob-controls-capx

Thank you so much!