Make UI object change size depending on another UI object position

Hello, I’ve been trying to figure out how to make a frame change size depending on other frame’s position. Example of what is happening: example. However, I want the red bar to always follow the dot.

I’ve already got a script for dragging the dot.

Code:

-- // Locals

UIS = game:GetService("UserInputService")
local MouseInputEnum = Enum.UserInputType.MouseButton1

Dragging = false
script.Parent.Dot.MouseButton1Down:Connect(function()
	Dragging = true
end)

-- // Started

UIS.InputChanged:Connect(function()
	if Dragging then
		local MousePos = UIS:GetMouseLocation()+Vector2.new(0,36)
		local RelPos = MousePos-script.Parent.AbsolutePosition
		local Precent = math.clamp(RelPos.X/script.Parent.AbsoluteSize.X,0,1)
		script.Parent.Dot.Position = UDim2.new(Precent,0,0.5,0)
	end
end)

-- // Ended

UIS.InputEnded:Connect(function(input)
	if input.UserInputType == MouseInputEnum then
		Dragging = false
	end
end)

Any help is appracticated.

local Slider = -- Where ever your slider is, this is not the bar but the main slider
local Bar = -- The red bar from the video
local RelativePosition = UIS:GetMouseLocation() - Slider.AbsolutePosition
local Percentage = math.clamp(RelativePosition.X/ Slider.AbsoluteSize.X, 0, 1)

-- Also anchor point should be set to (0,0.5)
Bar.Size = UDim2.fromScale(Percentage, 1) -- Bar would be where the bar is