How to script a UI bar that is vertical?

[athleticsbong (Lapidarist)]

I have some UI, which I would like to move up and down based on a value.

It’s set up like this, the Slider frame is using scale(not offset).

Here is what I tried so far.
I’m pretty new at scripting UI’s so I would appreciate any help, thanks!

[Jacky2804]

From what I can see, I will try my best to replicate the hierarchy of this UI.

ScreenGUI
   |-- GrayFrame
          |-- OrangeBarFrame
                  |-- MovingOrangeBar

I name it simple, so you can see what each item is responsible for. For the moving orange bar, you can simply use UDim2 to adjust its size by using Yscale.

Let’s say that you want the bar to be at its 50%

MovingOrangeBar.Size = UDim2.new(1,0,0.5,0) -- Scale 50% on Y-axis.

75.5%

MovingOrangeBar.Size = UDim2.new(1,0,0.755,0) -- Scale 75.5% on Y-axis.

You will play with scale value only, not the offset value.

You can put the OrangeBar frame right inside the GrayFrame so you don’t have to adjust their position manually.

Next for the sliding effect. You can achieve it by using TweenSize that tween from its current UDim2 to its UDim2 goal

local TweenToSize = UDim2.new(1,0,0.5,1) -- Goal is at its 50% from whatever value the bar has.
MovingOrangeBar:TweenSize(
     TweenToSize,
     Enum.EasingDirection.InOut,
     Enum.EasingStyle.Quad,
     1,
     true
)

[athleticsbong (Lapidarist)]

@Jacky2804

local TweenToSize = UDim2.new(1,0,0.5,1) -- Goal is at its 50% from whatever value the bar has.
MovingOrangeBar:TweenSize(
     TweenToSize,
     Enum.EasingDirection.InOut,
     Enum.EasingStyle.Quad,
     1,
     true
)

Thanks for explaining it! But after implementing that, there comes another problem. The bar is sized down on both ends, so I have to somehow tween it’s position down with size, would you be able to help here?

[Jacky2804]

That is probably because that moving orange bar is forced to be in the center. That is why when you tween it, it gets smaller from both ends. You can try using UIListLayout to stick that moving orange bar to the bottom of its parent.