[Solved] Triangle slider marker not lining up with mouse in certain spots

I am trying to create a triangle slider menu element but the marker for the slider doesn’t stick with the mouse in certain locations. I have tried using the values in different combinations but it just doesn’t want to work the way I want it to.

The code I am using

local mouse = game.Players.LocalPlayer:GetMouse()
local slider = script.Parent
local marker = script.Parent.marker
local right = workspace.pointer.right
local top = workspace.pointer.top

function UpdateSlider()
	local newx = (mouse.X-slider.AbsolutePosition.X)/slider.AbsoluteSize.X
	local newy = (mouse.Y-slider.AbsolutePosition.Y)/slider.AbsoluteSize.Y
	if newx > 1 then
		newx = 1
	elseif newx < 0 then
		newx = 0
	end
	if newy > 1 then
		newy = 1
	elseif newy < 0 then
		newy = 0
	end
	
	--[[local newdim = UDim2.new((((slider.Size.X.Scale/2)-(slider.Size.X.Scale/2)*newy))-(marker.Size.X.Scale/2),
		(((slider.Size.X.Offset/2)-(slider.Size.X.Offset/2)*newy))-(marker.Size.X.Offset/2),
		0,
		0):Lerp(UDim2.new((((slider.Size.X.Scale/2)+(slider.Size.X.Scale/2)*newy))-(marker.Size.X.Scale/2),
		(((slider.Size.X.Offset/2)+(slider.Size.X.Offset/2)*newy))-(marker.Size.X.Offset/2),
		0,
		0),newx)
	newdim = newdim + UDim2.new(0,0,0-(marker.Size.Y.Scale/2),0-(marker.Size.Y.Offset/2)):Lerp(UDim2.new(0,0,slider.Size.Y.Scale-(marker.Size.Y.Scale/2),slider.Size.Y.Offset-(marker.Size.Y.Offset/2)),newy)
	marker.Position = newdim]]
	
	local pos1 = UDim2.new(
		0-(marker.Size.X.Scale/2),
		0-(marker.Size.X.Offset/2),
		slider.Size.Y.Scale-(marker.Size.Y.Scale/2),
		slider.Size.Y.Offset-(marker.Size.Y.Offset/2)
	)
	
	local pos2 = UDim2.new(
		slider.Size.X.Scale+(marker.Size.X.Scale/2),
		slider.Size.X.Offset-(marker.Size.X.Offset/2),
		slider.Size.Y.Scale-(marker.Size.Y.Scale/2),
		slider.Size.Y.Offset-(marker.Size.Y.Offset/2)
	)
	
	local pos3 = UDim2.new(
		(slider.Size.X.Scale/2)+(marker.Size.X.Scale/2),
		(slider.Size.X.Offset/2)-(marker.Size.X.Offset/2),
		0-(marker.Size.Y.Scale/2),
		0-(marker.Size.Y.Offset/2)
	)
	
	marker.Position = pos1:Lerp(pos2,newx):Lerp(pos3,1-newy)
	right.Value = newx
	top.Value = 1-newy
end

local slideractive = false

function ActivateSlider()
	slideractive = true
	while slideractive do
		UpdateSlider()
		task.wait()
	end
end


slider.MouseButton1Down:Connect(ActivateSlider)

I eventually found the solution, I don’t remember the user that said I should use the canvasposition instead of absolute position but thanks to them I looked at absolute position and was able to fix my code.

The solution was using the y float value between 0-1 (0-100%) when calculating the x value. Doing this made the slider size shrink code wise till at the top the only option was the middle of the element.

Updated code:

local mouse = game.Players.LocalPlayer:GetMouse()
local slider = script.Parent
local marker = script.Parent.marker
local right = workspace.pointer.right
local top = workspace.pointer.top

function UpdateSlider()
	local newy = (mouse.Y-slider.AbsolutePosition.Y)/slider.AbsoluteSize.Y
	if newy > 1 then
		newy = 1
	elseif newy < 0 then
		newy = 0
	end
	local newx = (mouse.X-(slider.AbsolutePosition.X+((slider.AbsoluteSize.X/2)-((slider.AbsoluteSize.X/2)*(newy)))))/(slider.AbsoluteSize.X*newy)
	if newx > 1 then
		newx = 1
	elseif newx < 0 then
		newx = 0
	end
	
	local pos1 = UDim2.new(
		0-(marker.Size.X.Scale/2),
		0-(marker.Size.X.Offset/2),
		slider.Size.Y.Scale-(marker.Size.Y.Scale/2),
		slider.Size.Y.Offset-(marker.Size.Y.Offset/2)
	)
	
	local pos2 = UDim2.new(
		slider.Size.X.Scale+(marker.Size.X.Scale/2),
		slider.Size.X.Offset-(marker.Size.X.Offset/2),
		slider.Size.Y.Scale-(marker.Size.Y.Scale/2),
		slider.Size.Y.Offset-(marker.Size.Y.Offset/2)
	)
	
	local pos3 = UDim2.new(
		(slider.Size.X.Scale/2)+(marker.Size.X.Scale/2),
		(slider.Size.X.Offset/2)-(marker.Size.X.Offset/2),
		0-(marker.Size.Y.Scale/2),
		0-(marker.Size.Y.Offset/2)
	)
	
	marker.Position = pos1:Lerp(pos2,newx):Lerp(pos3,1-newy)
	right.Value = newx
	top.Value = 1-newy
end

local slideractive = false

function ActivateSlider()
	slideractive = true
	while slideractive do
		UpdateSlider()
		task.wait()
	end
end


slider.MouseButton1Down:Connect(ActivateSlider)

game:GetService("UserInputService").InputEnded:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
		slideractive = false
	end
end)

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.