How to cancel my volume for my volume slider?

I am creating a video player and am a bit stuck in part of the volume slider. This is a YouTube-style vertical slider, that is, if the slider is in the upper position, the volume should be 100%, and if the slider is dragged to the lower position, the sound should be 0. Currently, it does the opposite of what I want: (

Dragging the slider down will make the sound louder, and dragging it will reduce it.

Here is my code below regarding the volume slider.

// Sound Controller Settings ······························
   soundController = new SoundController();
   soundContrColor = soundController.colorChip;
   soundContrGray  = soundController.grayCover;
   soundContrGray.visible     = false;
   soundController.visible    = true;
   soundController.buttonMode = true;
   soundController.soundSlider.addEventListener(MouseEvent.MOUSE_DOWN, sliderDown);

// SoundController Button Mouse Events ························
   public function sliderDown(event:MouseEvent):void
   {
       soundController.soundSlider.startDrag(false, dragBounds);
       soundController.soundSlider.addEventListener(MouseEvent.MOUSE_MOVE, sliderMove);
       soundController.soundSlider.addEventListener(MouseEvent.MOUSE_UP, sliderUp);
       soundContrGray.visible = true;
   }

   public function sliderMove(event:MouseEvent):void
       {
       soundContrGray.height = soundController.soundSlider.y;
       userVolume = Math.round(((soundContrGray.y * soundContrGray.height) / 10) - 4);
       //userVolume = soundContrGray.height;
       setVolume(userVolume);

       trace("soundController.mouseY = "+soundController.soundSlider.y);
       trace("soundContrColor.height = "+Math.round(soundContrGray.height));
       trace("userVolume             = "+userVolume+"\r");

       event.updateAfterEvent();
       }

    public function sliderUp(event:MouseEvent):void
    {
        lastVolPoint = soundContrGray.height;
        setVolume(userVolume);
        event.updateAfterEvent();

        soundController.soundSlider.stopDrag();
        soundController.soundSlider.removeEventListener(MouseEvent.MOUSE_MOVE, sliderMove);
        soundController.soundSlider.removeEventListener(MouseEvent.MOUSE_UP, sliderUp);
    }

[TRACES] when I drag to the end:

soundController.mouseY = 6
soundContrGray.height  = 6
userVolume             = 0

[TRACES] when I completely drag down:

soundController.mouseY = 56
soundContrGray.height  = 56
userVolume             = 30

I believe this is the problem:

userVolume = Math.round(((soundContrGray.y * soundContrGray.height) / 10) - 4);

(- 4) - , , , , 0, 4.
- , ... userVolume = 4, 30.

, !:)

+3
4

- , , ?

userVolume = 30-Math.round(((soundContrGray.y * soundContrGray.height) / 10) - 4);
+4

0, 100% , 30, 0 ...

setVolume(100 - (userVolume * 100 / 30));

Substitude 0 in equation:
setVolume(100 - (0 * 100 / 30)) --> simplifies to
setVolume(100);

Substitute 30 in equation:
setVolume(100 - (30 * 100 / 30)); --> simplifies to
setVolume(100 - (3000 / 30)); --> simplifies to
setVolume(100 - 100); --> simplifies to
setVolume(0);
+2

Conceptually, what you want to do is reduce the sound below soundContrGray. Therefore, you need a maximum value (or in this case a maximum height) to compare with the current value. I believe that 30is the background height of the slider. I use bgfor background height.

userVolume = (soundContrGray.height / bg.heigth);
userVolume = Math.round((1 - userVolume) * 100);

This will give a relative volume level regardless of the height of the actual elements or where they are on the screen.

+2
source

userVolume = Math.round(100 * (1 - soundContrGray.height /(soundContrGray.y - 4)))

+1
source

All Articles