UISlider - Convert relative GUI into interactable sliders!
Introduction - What is UISlider?
UISlider is a utility/tool module I made that allows you to convert UI that fits the criteria, into interactable User-Interface sliders.
It’s designed to be simple.
Features
- Interactive Sliders: Create interactive sliders from relative GUI - works for both left and right sliding sliders!
- Type-Annotation support: Type-annotated for better dev experience
- Memory Optimized: Memory leak free
- Optimization: Optimized and efficient for use
- Simplicity: Incredibly simple to use
- Mobile support: Works on mobile
How to use
→ The usage of UISlider requires some setup with UI to look and work correct. ←
-
First, create a ScreenGui (or use existing one), and insert a frame. Size it accordingly for the slider. This will be the ‘holder’ for our slider thumb and filler, it is static. (Doesn’t move)
-
Next, inside of that frame, insert another frame within the bounds of the previous frame, this will be the ‘fill’ frame that moves with the thumb button (Movable). This must have an AnchorPoint of 0 or 1 on the X, or else it won’t slide correct. If you want it to slide to the right from the left, AnchorPoint of 0 should be used on the X, if you want it to slide to the left from the right, AnchorPoint of 1 can be used.
-
Next, create a GuiButton - which classifies as either of the two current GUI buttons in studio; TextButton or ImageButton. This is our thumb button, and what users can interact with to move the slider to move to the left or right. Recommended this is positioned on the right or left side of the fill frame from the previous step.
Your GUI should look something like this:
And your explorer should look something like this:
- Next, we can create the actual code
-- In a LocalScript...
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")
local UISlider = require(ReplicatedStorage.UISlider)
local player = Players.LocalPlayer
local playerGui = player.PlayerGui
-- Grab all the GUI required for the slider
-- Declare GUI's using :WaitForChild due to replication issues
local screenGui = playerGui:WaitForChild("ScreenGui")
local sliderTrack = screenGui:WaitForChild("SliderTrack")
local sliderFill = sliderTrack:WaitForChild("SliderFill")
local sliderThumb = sliderTrack:WaitForChild("SliderThumb")
-- Configuration for the slider
local CONFIG: UISlider.UISliderConfig = {
sliderTrackFrame = sliderTrack, -- The main parent frame
sliderFillFrame = sliderFill, -- The fill frame
sliderThumbButton = sliderThumb, -- The thumb button
stepSize = 0.05, -- How much to step each value (0 = no step)
interactable = true, -- Whether the thumb button is actually interactable
initialSliderValue = 0.5, -- The initial value of the slider from 0 to 1
}
-- Create our UISlider object
local slider = UISlider.new(CONFIG)
-- Here we can do whatever, like listen to the OnSliderValueChanged signal!
slider:OnSliderValueChanged():Connect(function(oldValue: number, newValue: number)
-- This runs anytime the slider is changed!
print(`Slider value changed from: {oldValue} to {newValue}`)
end)
API Reference
Functions
View
UISlider.fromAll(configs: {UISliderConfig}): {UISlider}- Helper function that constructs a batch of UISliders
Constructors & Methods
View
-
UISlider.new(config: UISliderConfig): UISlider- Constructs a new UISlider object-
:SetInteractable()- Enables slider interaction -
:SetUninteractable()- Disables slider interaction -
:IsInteractable()- Checks whether the slider is current interactable -
:SetValue(value: number)- Manually sets the slider to a specific value. -
:GetValue()- Gets the current value of the slider -
:OnSliderValueChanged()- Receives a signal that fires when the slider value changes -
:OnSliderPressed()- Returns a signal that fires when the slider thumb is pressed down -
:OnSliderReleased()- Returns a signal that fires when the slider thumb is released from a pressed state -
:OnSliderHovered()- Returns a signal that fires when the slider thumb is hovered -
:OnSliderUnhovered()- Returns a signal that fires when the slider thumb is no longer hovered -
:SetStepSize(step: number)- Sets the step size for slider value increments -
:Destroy()- Completely destroys the UISlider Instance
-
Types
View
UISliderConfig- Defines the overall structure of configuration for UISliderUISliderInternals- Represents anything private in the classUISlider- Represents anything public in the class
Conclusion
Create interactive User-Interface sliders using UISlider! It turns a relatively complex challenge into a simple, easy-to-use framework.
If you encounter any issues, let me know and I can try to help!
Please make sure to like the post if this module was helpful for you! 
Changelog
Version 1.0.1 (Current)
- Added proper mobile support
License
Free to use and modify for any Roblox projects. Credits appreciated but not required.
Installation
You can download here on Roblox Creator Store: UISlider - Convert GUI into interactable sliders!
Last Updated: 8/26/25
Author: RobloxJrTrainer
Version 1.0.1
