Slider gui isn't working properly

Hi, I’m XXgamerisaliveXx, and I’m trying to making a slider GUI which moves when the mouse’s button1 is down. Here’s the code:

local sliderBtn = script.Parent

local IsHeld = false

local player = game.Players.LocalPlayer

local character = player.Character or player.CharacterAdded:Wait()

local mouse = player:GetMouse()

sliderBtn.MouseButton1Down:Connect(function()
	IsHeld = true
end)


sliderBtn.MouseButton1Up:Connect(function()
	IsHeld = false
end)

game:GetService("RunService").RenderStepped:Connect(function()
	if IsHeld then
		sliderBtn.Position = UDim2.new(sliderBtn.Position.X.Scale, mouse.X - sliderBtn.AbsolutePosition.X / 2, sliderBtn.Position.Y.Scale, sliderBtn.Position.Y.Offset)
	end
end)

Let me know if you know why this isn’t working properly!

Define “isn’t working properly” so we know where to look. Are there any errors, or is it just not moving properly? Perhaps a video of it and a video of something you’re trying to model it on?

I’m so sorry, I’m new so I don’t know much

It’s not moving properly, It also is not staying in the frame of it

When I create a slider, I make it so that the slider button is contained such that all I have to do is move it between 0 and 1 in the X scale, and the other components can remain 0.

What you want to do is record the mouse position when the person first holds their mouse button down, as well as the slider button position. It’s also not really that useful to have the renderstepped connection connected all of the time.

local UserInputService = game:GetService( 'UserInputService' )
local startingPos = nil
local startingMousePos = nil

sliderBtn.MouseButton1Down:Connect( function()
	startingPos = sliderBtn.Position.X.Scale
	startingMousePos = UserInputService:GetMouseLocation()

	RunService:BindToRenderStep( 'SliderControl', 100, renderStep )
end )

We can then simply unbind this connection when the mouse is lifted. Now there’s a slight catch that I found when making my own sliders, and that’s that I believe MouseButton1Up only fires if you remain over the button itself (correct me if I’m wrong) but I’m pretty sure that caused and issue where the slider kept moving with the mouse after lifting the button. To counter this we can just unbind if the mouse button is lifted:

UserInputService.InputEnded:Connect( function( inputObject )
	if inputObject.UserInputType == Enum.UserInputType.MouseButton1 then
		pcall( RunService.UnbindFromRenderStep, RunService, 'SliderControl')
	end
end )

You then want to (inside that renderstepped connection) check the mouse’s current position against where you started holding it, and calculate that change as a % change of the width of the slider. You can then move the slider to the new position:

function renderStep()
	local newMousePos = UserInputService:GetMouseLocation()
	local mouseChange = ( newMousePos.X - startingMousePos.X ) / sliderBtn.Parent.AbsoluteSize.X
	sliderBtn.Position = UDim2.new( math.clamp( startingPos + mouseChange, 0, 1 ), 0, 0, 0 )
end
2 Likes

I’ll try it, thank you so much

I’m actually really confused that what math.clamp does? I also don’t understand if I read wiki.

If you use math.clamp( number, a, b ) it will return number if it’s between a and b. If number < a then it returns a and if number > b then it returns b.

In this example I’ve used it to clamp the position between 0 and 1 to ensure the slider can’t go further than its container, which is one of the problems you stated with it.

Oh, so that’s math.clamp() Thanks!