Making a setting bar

Hi! I am creating a setting bar that will regulate the volume of the ingame sound, but I got no idea about how could I pull this off.
Here is my progress:

  • here is my scrolling bar, that white squere is a TextButton that will be later transparent, it’s purpose is to detect mouse click
    Posnetek zaslona 2021-01-26 210731

  • I have scripted TextButton to detect MouseButton1Down/Up and based on that connection and disconnection from the RenderStepped event.

  • I store mouse position as Vector2.new(mouse.X, mouseY)

So my main problem is actually converting mouse.X (which is in offset) to a scale that I could use for a bar. I should also mention that the bar you is located in even bigger frame, so I dont think that a regular
conversion from offset to scale would help.
Posnetek zaslona 2021-01-26 212049
I hope I provided enough information, but if I didnt then pls ask. Thanks for help and your time!

You can get the absolute position of the parent object and compare the mouse position with that and the absolute size of the parent.

More specifically something like this (might contain a basic error because I’m on mobile. If left as is it will error if the frame has no size, but if it has no size there is no point in doing this check anyways)

local percentage = math.clamp((Mouse.X - frame.AbsolutePosition.X)/frame.AbsoluteSize.X,0,1)

Thanks for your reply I will check this on comp tomorrow, really appreciate it
Update: Thanks, it worked perfectly percentage never errors or buggs since you have clamped it.