Weird SurfaceGui behaviour when paired with mouse position

Help and Feedback Scripting Support
1

Hello!

I’m not really sure how to ask this question, nor do I know why it’s happening, but I’m trying to make a SurfaceGui slider, but something’s happening where the indicator is positioned weirdly, let me just show a video:

First, at the beginning, I added this little click thing which shows the cursor’s position which is the white circle that expands. This is in the proper place.
However, when I hold down and move my mouse, it puts the notch to some other position that is far to the right

Anyway, my idea was that I would use the same formula for the white circle for the notch’s position but it just doesn’t work for whatever reason.

        local sliderBounds = object:WaitForChild('SliderBounds') :: TextButton
		local notch = sliderBounds:WaitForChild('Notch') :: ImageButton
		local sliderDetailColoured = sliderBounds:FindFirstChild('SliderDetailColoured')
		local yOffset = 36
		local isDown = false
		sliderBounds.MouseButton1Down:Connect(function(x,y)
            -- this is the part where the white circle is created
			local frame = Instance.new('Frame')
			frame.Parent = sliderBounds
			frame.BackgroundColor3 = self:GetContrastColour()
			frame.Position = UDim2.new(0,mouse.X - object.AbsolutePosition.X,0.5,0)
			frame.AnchorPoint = Vector2.new(0.5,0.5)
			local uiAspectRatioConstraint = Instance.new('UIAspectRatioConstraint')
			uiAspectRatioConstraint.Parent = frame
			local uiCorner = Instance.new('UICorner')
			uiCorner.Parent = frame
			uiCorner.CornerRadius = UDim.new(1,0)
			local tween = tweenService:Create(frame, TweenInfo.new(0.5), {Size = UDim2.new(1,0,5,0); BackgroundTransparency = 1})
			tween:Play()
			tween.Completed:Wait()
			frame:Destroy()
			isDown = true
			local diff = x
			local notchPosAtDown = notch.AbsolutePosition.X
			local connection = mouse.Move:Connect(function(input: InputObject)
                -- this is where the notch's position is updated
				notch.Position = UDim2.new(0,(mouse.X - object.AbsolutePosition.X) - x,.5,0)
			end)
			multiEventHandler.new(
				true,
				eventHandler.new(
					userInputService,
					'InputEnded',
					function(input: InputObject)
						if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
							return true
						end
					end
				),
				sliderBounds.MouseButton1Up,
				notch.MouseButton1Up
			):Connect(function()
				connection:Disconnect()
				isDown = false
			end)
		end)
	end
2

Found a solution that uses raycasting and projects the position to the gui based on the pixels per stud which is 50:

		    local connection = mouse.Move:Connect(function(input: InputObject)
				local unitRay = mouse.UnitRay
				local raycastParams = RaycastParams.new()
				raycastParams.FilterType = Enum.RaycastFilterType.Whitelist
				raycastParams.FilterDescendantsInstances = {adornee}
				local hit = workspace:Raycast(unitRay.Origin, unitRay.Direction * 500, raycastParams)
				if hit and hit.Instance then
					if hit.Normal == adornee.CFrame.UpVector then
						local topLeftCFrame = adornee.CFrame * CFrame.new(-adornee.Size.X / 2, -adornee.Size.Y / 2, adornee.Size.Z / 2)
						local positionRelativeToAdornee = topLeftCFrame:PointToObjectSpace(hit.Position)
						print(positionRelativeToAdornee)
						local projectedPosition = -positionRelativeToAdornee.Z * 50
						notch.Position = UDim2.new(0,math.clamp(projectedPosition, 0, sliderBounds.AbsoluteSize.X),0.5,0)
					end
				end
			end)