Basic Slider Element

I made this OOP-based slider for a 3-row slider RGB colour picker, and since I’ve seen a few topics of people asking how to make a slider, or a colour picker, I decided I’d make it open source.

It supports mouse, touch, and controller input.

The code of the module can be found here (GitHub).

You will need a slider bar/button GuiObject instance to parent to the module, as it does not do the instantiation of it right now. I uploaded the module as a free model with the required GuiObject parented to it here.

The default value range is 0-1, refer to documentation below to see how to change the range.

Documentation
-- arg #1 == new value, arg #2 == old value
local function changed_function(new_val, old_val)

end

-- return value #1 is the OOP slider object
-- return value #2 is the value.Changed event you can connect to if you need to fire multiple functions (if just 1 function, just pass it as argument #1)

-- arg_type, arg_name, default_value
local slider, changed_event = Slider.new(Function changed_function nil, GuiObject Parent nil, Number min 0, Number max 1, Boolean round false)


-- to parent without passing in parameter #2, you'd do this:
slider.Bar.Parent = your_parent

-- to set the slider to a value manually, you'd do this:
slider:Set(value, Boolean tween_slider false)

05/04/2019: updated code with some bug fixes including malfunctioning when slider is resized.

82 Likes

COOL! I looked through some of the github code and noticed that you used bindable events to achieve custom events. I’d recommend that you use a pure lua implementation of events instead.

Why though? Won’t doing it this way allow for it to be used more easily?

6 Likes

Using a BindableEvent in this case is better as it allows developers to easily get the value(s) of the slider by connecting to the bindable’s event(s). If it were ‘pure Lua’, you wouldn’t have any way of reading the slider’s value except for reading the properties of the UI element, which will lead to awful code quality. The BindableEvent essentially creates a direct bridge between the slider element and your own pieces of logic that depend on the slider.

5 Likes

It technically is being achieved with pure Lua. The BindableEvent simply allows the user easy access to bind multiple functions to the slider.

I dont understand what your implaying, a pure lua implamentation of custom events would work. I dont understand why you wouldnt be able to read the sliders value.

Ah, I slightly misinterpreted what you were saying now that I reread it.

As Fm_Trick mentioned, it seems that you can already just index the Value key of the object returned by Slider.new(). That being said, I still believe the BindableEvent that is being provided is better to use as it allows developers to connect to its event. That way your script will only execute whenever BindableEvent.Event is called. This eliminates the need for a while loop to constantly retrieve the slider’s value and will make your code look cleaner and run a little faster.

What I originally thought you were saying was that you could just rely on the UI’s events like Changed or Object:GetPropertyChangedSignal("Position") to figure out the position of the slider, which would cause some complications where the circle on the slider could be all the way on the right (value of 1) but its position would be, for example, 0.95 on Scale.X, meaning you would have to use extra math to ‘fix’ the value.

You are welcome to modify the source to fit your needs. However, yes, you can read the current slider value by indexing .Value on the slider object.

Nice, exactly what i needed. I have question tho, can it start from 0.5 and ended on 2.5. Im just wondering. I wanna make brightness sliding bar @Fm_Trick

1 Like

Use Current slider values, multiply them by two, then add 0.5

How does this work? Your model only includes a modulescript and an imagelabel… with no localscripts…How is this supposed to work?

This is a module, not a GUI Element you put directly into your GUI. You need to require the module with your own LocalScript, and create a slider with Slider.new().

Edit: If you read the description it says this is OOP.

1 Like

What does OOP stand for,

From a basic google search, OOP stands for Object-Oriented Programming.
Read more here

Howdy!
After reviewing and using the code, I believe Slider:Destroy() seems to not be working anymore. I think this is because Destroy() is now overwritten by something of Roblox’s system. I changed it to function Slider:Remove() instead and it works now.