How to make a Toggle Switch

Hi, devs! This is my second tutorial. Today, I’m going to make a toggle switch. So, I am following these steps:

  1. Create a Screen GUI and make a toggle switch.
    Capture d’écran 2023-02-08 181122

  2. Create also the first frame and the second called “ToggleSwitch”.

  3. Make a script that Toggle Switch can be working:

local switched = false -- A value, which is being toggled.

local switch = script.Parent.Switch -- Detect the switch button, which is moving apart from the toggle switch.

switch.MouseButton1Click:Connect(function() -- A function that clicks the toggle switch, which is turned on and off.
	if switched == false then
		switch:TweenPosition(UDim2.new(0.5), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.5)
		wait(0.5)
		switch.BackgroundColor3 = Color3.new(0, 1, 0) -- The colour change when switching.
		switched = true
	else
		switch:TweenPosition(UDim2.new(0), Enum.EasingDirection.Out, Enum.EasingStyle.Sine, 0.5)
		wait(0.5)
		switch.BackgroundColor3 = Color3.new(1, 0, 0)
		switched = false
	end
end)

  1. Watch the video. This is will be the result if you have scripted:

  2. And enjoy your working toggle switch!

Thanks for greeting with your toggle switch too! :grin:

Sound so good. :smile:

11 Likes