Slider UI not animating

Hi,

I followed a tutorial on how to make a slider but the results they got were not the same as mine. Mine was choppy and didn’t tween even though I had a tween on it. What seems to be the problem in this?

local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local TweenService = game:GetService("TweenService")

local Slider = script.Parent
local Fill = script.Parent.Bar
local Trigger = script.Parent.Trigger
local OutputValue = script.Parent.Output
local TextLabel = script.Parent.Parent.Value

local Mouse = Players.LocalPlayer:GetMouse()

local sliderActive = false

Fill.Size = UDim2.fromScale(OutputValue.Value,1)
TextLabel.Text = tostring(OutputValue.Value)

function updateSlider()
	local output = math.clamp((Mouse.X - Slider.AbsolutePosition.X)/Slider.AbsoluteSize.X,0,1)
	
	if OutputValue.Value ~= output then
		TweenService:Create(Fill, TweenInfo.new(0.25, Enum.EasingStyle.Exponential), {Size = UDim2.fromScale(output, 1)}):Play()
	end

	Fill.Size = UDim2.fromScale(output,1)
end

function activateSlider()
	sliderActive = true
	
	while sliderActive do
		updateSlider() 
		task.wait()
	end
end

UserInputService.InputEnded:Connect(function(input: InputObject, gameProcessedEvent: boolean) 
	if input.UserInputType == Enum.UserInputType.MouseButton1
		or input.UserInputType == Enum.UserInputType.Touch then

		sliderActive = false
	end
end)

Fill:GetPropertyChangedSignal("Size"):Connect(function(...: any) 
	TextLabel.Text = tostring(math.round(Fill.Size.X.Scale * 100) / 100)
end)

Trigger.Activated:Connect(activateSlider)

Thanks for reading

Hi there! Could you provide a video of the error you’re currently experiencing? In that way, I may be able to assist you other than reading the code you sent!

2 Likes

Sure!

I followed this tutorial: https://www.youtube.com/watch?v=Z19BS8HtiAs&ab_channel=TheRobot_140

It also doesn’t let me hold and move it, I need to click for some reason.

What I’d do in this scenario is grab the mouse’s X position and tween the slider based on it. The tutorial you’ve watched indirectly states that by affirming you need to grab the mouse’s position — in this case being the X axis — which can be done by so.

local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local TweenService = game:GetService("TweenService")

local Slider = script.Parent
local Fill = script.Parent.Bar
local Trigger = script.Parent.Trigger
local OutputValue = script.Parent.Output
local TextLabel = script.Parent.Parent.Value

local Mouse = Players.LocalPlayer:GetMouse()
local MousePosition = UserInputService:GetMouseLocation()

--[[
Example usage of the MousePosition

local UserInputService = game:GetService("UserInputService")
local RunService = game:GetService("RunService")

local gui = script.Parent
local screenGui = gui.Parent
screenGui.IgnoreGuiInset = true

local function moveGuiToMouse()
	local mouseLocation = UserInputService:GetMouseLocation()
	gui.Position = UDim2.fromOffset(mouseLocation.X, mouseLocation.Y)
end

moveGuiToMouse()
RunService:BindToRenderStep("moveGuiToMouse", 1, moveGuiToMouse)
]]--

local sliderActive = false

Fill.Size = UDim2.fromScale(OutputValue.Value,1)
TextLabel.Text = tostring(OutputValue.Value)

function updateSlider()
	local output = math.clamp((Mouse.X - Slider.AbsolutePosition.X)/Slider.AbsoluteSize.X,0,1)
	
	if OutputValue.Value ~= output then
		TweenService:Create(Fill, TweenInfo.new(0.25, Enum.EasingStyle.Exponential), {Size = UDim2.fromScale(output, 1)}):Play()
	end

	Fill.Size = UDim2.fromScale(output,1)
end

function activateSlider()
	sliderActive = true
	
	while sliderActive do
		updateSlider() 
		task.wait()
	end
end

UserInputService.InputEnded:Connect(function(input: InputObject, gameProcessedEvent: boolean) 
	if input.UserInputType == Enum.UserInputType.MouseButton1
		or input.UserInputType == Enum.UserInputType.Touch then

		sliderActive = false
	end
end)

Fill:GetPropertyChangedSignal("Size"):Connect(function(...: any) 
	TextLabel.Text = tostring(math.round(Fill.Size.X.Scale * 100) / 100)
end)

Trigger.Activated:Connect(activateSlider)

Grab the mouseLocation.X and use that as your slider’s offset during the tweening.

1 Like

I’m not sure why this is having the same result as the other code.

Adapt this portion of the code to the following one and let me know if it works.

function updateSlider()
	Slider:TweenSize(UDim2.new(MouseLocation.X, Slider.AbsoluteSize.X, 0, 1), Enum.EasingDirection.Out, Enum.EasingStyle.Exponential, 0.25)
end
1 Like

I tried it and it resizes it weirdly and breaks

This might be a bit problematic since I can’t see the results live. I’ll try creating my own. Get back to you in a few moments with a possible solution.

1 Like

Thank you for the help, I understand and it is tedious.

I found a solution:

local Players = game:GetService("Players")
local UserInputService = game:GetService("UserInputService")
local TweenService = game:GetService("TweenService")

local Slider = script.Parent
local Fill = script.Parent.Bar
local Trigger = script.Parent.Trigger
local OutputValue = script.Parent.Output
local TextBox = script.Parent.Parent.TextBox

local Mouse = Players.LocalPlayer:GetMouse()
local MousePosition = UserInputService:GetMouseLocation()

local sliderActive = false

Fill.Size = UDim2.fromScale(OutputValue.Value,1)
TextBox.Text = tostring(OutputValue.Value)

function updateSlider(number: number)
	local output = number or math.clamp((Mouse.X - Slider.AbsolutePosition.X)/Slider.AbsoluteSize.X,0,1)
	OutputValue.Value = output
	
	Fill:TweenSize(UDim2.fromScale(output, 1), Enum.EasingDirection.Out, Enum.EasingStyle.Quad)
	Fill.Size = UDim2.fromScale(output,1)
end

function activateSlider()
	sliderActive = true

	while sliderActive do
		updateSlider() 
		task.wait()
	end
end

UserInputService.InputEnded:Connect(function(input: InputObject, gameProcessedEvent: boolean) 
	if input.UserInputType == Enum.UserInputType.MouseButton1
		or input.UserInputType == Enum.UserInputType.Touch then

		sliderActive = false
	end
end)

Fill:GetPropertyChangedSignal("Size"):Connect(function(...: any) 
	TextBox.Text = tostring(math.round(Fill.Size.X.Scale * 100) / 100)
end)

TextBox.FocusLost:Connect(function(enterPressed: boolean, inputThatCausedFocusLoss: InputObject) 
	local Number = tonumber(TextBox.Text)

	if Number then

		if Number > 1 then
			TextBox.Text = "1"
			updateSlider(1)
		end

		if Number < 0 then
			TextBox.Text = "0"
			updateSlider(0)
		end

		if Number >= 0 and Number <= 1 then
			updateSlider(Number)
		end
	else
		TextBox.Text = "0.5"
		updateSlider(Number)
	end
end)

Trigger.Activated:Connect(activateSlider)


1 Like

I see. Glad you found a fix to your error! I think you were using the TweenService:Create() in the wrong manner, just watch out for possible further mistakes!