How to make a simple volume dragable button which properly functions ? i have researched but cant find an effective way

Question

I am always trying to make a simple sound player which also has volume control but i cant figure out how to make it connected with the sound volume ,

i did make a Button which can be dragged but i wanted to set its maximum x and y ,

so i did this ,

vol_player_btn.addEventListener(MouseEvent.MOUSE_MOVE,buttonInside);

protected function buttonInside(e:MouseEvent):void {
    if (e.buttonDown) {
            vol_player_btn.x = 480;
            vol_player_btn.y = mouseY;
        }
}

but then

two problems arise which tells me i am making the volume button the wrong way and maybe i need help

The two problems are

1. How do i link it with sound that volume is 100,90,80 etc. (i know about sound transforms but still not on how to link it with this button)

2. And it can go up and and down as much as the mouse moves , Yes i know i can set it something like this in the function and inside the if(e.buttonDown)

if (mouseY is less than the number i will guess randomly) {then do the things}

But what i know is that this is not an efficient way and so i will be eager to hear your ways ideas about the volume functionality

Answer 1

Lets start with solving the second problem. You want to implement an upper and lower 'cap' so that the volume button can't go above or below a certain height. Pretty simple to do:

if (e.buttonDown) {
            vol_player_btn.x = 480;
            vol_player_btn.y = mouseY;

            // Logic to keep button y value between a min and max value
            if(vol_player_btn.y > MAX_HEIGHT) 
                vol_player_btn.y = MAX_HEIGHT;
            if(vol_player_btn.y < MIN_HEIGHT) 
                vol_player_btn.y = MIN_HEIGHT;
        }

To solve the first issue you want to convert the height range of the button (eg. 120 to 320) into a typical volume value (0 to 100). You can do this simply by finding the percentage:

percentage = (vol_player_btn.y - MIN_HEIGHT) / (MAX_HEIGHT - MIN_HEIGHT)

Using the above equation, if the button height is at its lowest (eg y = 120px) the percentage will equal 0. If it's at its highest (eg y = 340) the percentage will equal 100. At it's mid point (eg y = 230) the percentage will equal 50, and so on.