Custom Color3 - Color Slidingbar

Resources Community Tutorials
, ,
#1

Hi! So probably many people already guessed: custom Color3 is a bit different than other things. It may be a bit hard, a bit easy, a bit of problem, but today, we are going to make a Color3 sliding bar gui!

–What are we going to make? – We are going to make an RGB Sliding Bar

  • We are going to make the gui
  1. The visual bar
  2. The moveable bar

  • Local Inputs

  • RemoteEvents

  • Mixing

I. The Gui

First, we have to make the sliding bar gui.

image
image838×530 78.4 KB

I made a gui with the things.
To make the color3 values of R, G, B a known value, make custom bars, with a textlabel, to show the current amount or R, G, B.
image

You have something like this now:

image

The frames are the bars, the labels are the known values.

II. Local Inputs

Now, we are going to script the sliding bars.

One frame should look like this:
image
BrightnessButton is the moveable bar. That is a TextButton.

One label should look like this:
image
B is a NumberValue.

Add a localscript inside of the frame, and copy this code:

local uis = game:GetService("UserInputService")
local dragging = false

script.Parent.BrightnessButton.MouseButton1Down:Connect(function()
	dragging = true
end)

uis.InputChanged:Connect(function()
	if dragging then
		local mousePos = uis:GetMouseLocation()+Vector2.new(0, 0)
		local relPos = mousePos-script.Parent.AbsolutePosition
		local precent = math.clamp(relPos.X/script.Parent.AbsoluteSize.X,0,1)
		script.Parent.BrightnessButton.Position = UDim2.new(precent,0,0,0)
		script.Parent.Parent.BlueLabel.Text = precent * 255
		script.Parent.Parent.BlueLabel.B.Value = precent * 255
		script.Parent.RemoteEvent:FireServer(precent*255)
	end
end)

uis.InputEnded:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 then
		dragging = false
	end
end)

Basically, we make the gui draggable, and slashing the moveable bar’s position with the absolutesize of the frame, we get a number, and getting that number 255 times because we are working in RGB.

III. RemoteEvents

You could see, we already used RemoteEvents to bring the local numbers into server’d numbers. Put the percent*255 argument when firing the remotevent. For the RemoteEvent script, use this:

script.Parent.RemoteEvent.OnServerEvent:Connect(function(player, rgb)
	script.Parent.Parent.BlueLabel.B.Value = rgb
end)

If you don’t know what is a RemoteEvent and how to use it, check out some tutorials.

IV. Mixing
Now, we just have to mix these numbers.

Create a Color3Value and a script
image

Inside of the script, put this:

local red = script.Parent.RedLabel.R -- We already changed the text of these labels by the RemoteEvents, so these numbers are valid in the server
local green = script.Parent.GreenLabel.G
local blue = script.Parent.BlueLabel.B

while true do -- We are going to translate the colors to the value in 24/7 :) This will make the sliding visible
  wait()
  script.Parent.ColorValue.Value = Color3.fromRGB(red.Value, green.Value, blue.Value)
end

--IMPORTANT: If you use local red = script.Parent.RedLabel.R.Value, it won't work. Say value in the while loop to make it work.

And you are done! :smiley:
At overall, it’s a cool thing to make like custom hair colors or ect, this tutorial is a little help with custom color3 converting.

2 Likes