How I could make an RGB slider on Roblox

Help and Feedback Scripting Support
, , ,
#1

Before I Start, I am not looking for free handouts, just ideas of how I could execute this idea.

basically, I am trying to make an R, G and B slider each with its corresponding color and slider options.

Similar to this:

image
image696×378 76.3 KB

How would I go about executing something like this? Anyone who has made something similar to this, how did you start?

2 Likes
#2

These aren’t terribly hard, it’s similar to just normal slide bars but you multiply the 0-1 value by 255.

Unless you’re uncertain on how to arrange sliders in the first place, I’m unsure how to describe how to start. So I’ll just explain everything as what I do, just minus the code as per requested. This is kind of a word bomb tbh and added lots of unnecessary content into this post.

To create a slider is fairly easy, personally I just make a small frame where the Y size will be like 1-2 offset value and X is scaled. I then add 3 child frames for visuals. Child one would be the min (Far left), child two (Far right) would be the max and lastly the slide bar itself.

kind of like this.
image

image
image758×90 5.01 KB

While you don’t need min-max; I personally like them for the convenience of finding the min position and max position without the need of subtracting by half the absolute size of the main frame.

And finding the values 0 - 1 with this is pretty easy, check the mouse’s X coordinates subtract the min position value then divide that by the total distance (max - min). Then to set the slider’s position, there’s 2 ways of doing this but I’ll just go with the simple method, since you have the percent at which you dragged at, set the x scale factor to the percent.

For the code, I personally turn a slider into an object and have an OnUpdate bind to let listening scripts know that the slider is being moved, but it’s not completely necessary. And to save some trouble, using Frame.MouseMoved:Connect(function(x, y) is convenient for the fact it will only fire when the mouse is inside of the frame; this is why I have a parent background frame for the slider. Just need to be completely sure that when using InputBegan and InputEnded you’re listening for the correct input type, like mouse or touched (Was a dumb mistake on my part).

Now the numbers, if you want a method for players to type in the values you want, you can just as easily do that with a little bit of string formatting, but I won’t get too much into that. After taking the RGB value from text, just map it to 0-1 and update the slider with the new position and number.

And for text legibility, doing .Text = ("%.0f"):format(percent * 255) is convenient and clean. The number 0 in %.0f is the decimal place if you want to get specific.

4 Likes
#3

Having a little bit of trouble on the Number display part. How do I display the number up to 255?

I get this error when I try to run that line of code in the chat:

Players.militry22q.PlayerGui.RGBColorPicker.Base.SliderGui.RedBar.SliderHandler:25: attempt to perform arithmetic (mul) on UDim2 and number

everything else works fine. Only the number display won’t work.

-- This is only the bottom part of my code

UIS.InputChanged:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseMovement then
		if sliderDragging == true then
			local mouseLoc = UIS:GetMouseLocation()
			local relativePos = mouseLoc-sliderFrame.AbsolutePosition
			local percentage = math.clamp(relativePos.X/sliderFrame.AbsoluteSize.X,0,1)
			sliderButton.Position = UDim2.new(percentage,0,0.6375,0)
-- Here is where I am having problem !!!!!
			sliderDisplay.Text = math.round(sliderButton.Position * 255)
-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		end
	end
end)

I should also include that the slider base is 400 pixels long.

#4

Oh I see, when you get the percent, similar to what you have:

local abs_size = sliderFrame.AbsoluteSize
local abs_pos = sliderFrame.AbsolutePosition
local max = abs_pos.X + (abs_size.X * .5) -- // The far right
local min = abs_pos.X - (abs_size.X * .5) -- // The far left

local percentage = math.clamp((mouse_position.X - min)/(max - min), 0, 1)

and with this you’ll set your Text:
sliderDisplay.Text = math.round(percentage * 255)

or
sliderDisplay.Text = ("%.0f"):format(sliderButton.Position * 255)

I guess I made some description errors when writing my initial response but hopefully that clears the confusion regarding that bit.

(I changed the relative position to the base position as it seemed easier to comprehend to me)

EDIT: Noticed a huge mistake in calculation, subtracting the min helps with keeping the value positive**** (mouse_position - min)

1 Like
#5

Players.militry22q.PlayerGui.RGBColorPicker.Base.SliderGui.RedBar.SliderHandler:27: Expected identifier when parsing expression, got ‘)’

tried to figure out the extra “)” but still continued to get blue/red lines on this code

	local percentage = math.clamp((max - mouse_position.X)/(max - min)), 0, 1)
1 Like
#6

Ah yeah, I notice it, at the end of (max - min) there’s an extra parenthesis, I wasn’t paying attention and didn’t check it in a script to make sure there’s no errors before posting, sorry.

1 Like
#7

One more error (sorry about bothering you)

I’ll just go ahead and send everything I got because I am confused out of my mind why the error is bringing up vector2 and everything…

The error I’m getting:

Players.militry22q.PlayerGui.RGBColorPicker.Base.SliderGui.RedBar.SliderHandler:24: invalid argument #1 (Vector2 expected, got number)

My Code

local UIS = game:GetService("UserInputService")

local sliderFrame = script.Parent
local sliderButton = sliderFrame.Slider
local sliderDisplay = sliderFrame.SliderValue
local sliderDragging = false

sliderButton.MouseButton1Down:Connect(function()
	sliderDragging = true
end)

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

UIS.InputChanged:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseMovement then
		if sliderDragging == true then
			local mouseLoc = UIS:GetMouseLocation()
			local abs_size = sliderFrame.AbsoluteSize
			local abs_pos = sliderFrame.AbsolutePosition
			local max = abs_pos.X + (abs_size * .5)
			local min = abs_pos.X - (abs_size * .5)
			local percentage = math.clamp((max - mouseLoc.X)/(max - min), 0, 1)
			sliderButton.Position = UDim2.new(percentage,0,0.5,0)
            sliderDisplay.Text = ("%.0f"):format(sliderButton.Position * 255)
		end
	end
end)

Sorry about this again, I don’t really like having to do this but I am very confused.

#8

Whew, this is still my fault heh, kind of out of it today but on line 24, you have it doing abs_size * .5, I was writing my stuff fast and made some errors. You’ll need to include .X on it. (abs_size.X * .5) this is also done on line 25

And on line 28 you’ve multiplied the position of the mouse instead of the percentage on line 27, which is a vector 2, by a number which won’t give you a number but a vector2 value

1 Like