SlateUI
DocsComponentsGitHub
Install SlateUI Plugin
SlateUI
DocsComponentsGitHub
Install SlateUI Plugin

Components

  • installation
  • button
  • inputs
  • notification
  • progressbar
  • loading
  • proximity
  • router
Component

InputsService

One service, three input primitives: Slider (drag), Text (focus), and Switch (toggle). Each attaches to an existing Roblox GUI hierarchy and fires a callback with the current value.

Overview

InputsService expects you to have already built the GUI hierarchy in Studio. Each function receives the root container and wires up all input logic, tweens, and cleanup internally. Connections are automatically disconnected when the root instance leaves the DataModel via AncestryChanged.

Slider

Slider() tracks MouseMovement across the track's absolute width and converts it to a 0–100 integer. An invisible InputSink TextButton is injected into the track during a drag so no other GUI elements steal input.

Interactive Preview
value50
0100

Properties

Min0
Max100
Step1
Default50
Disabled
InputsService.Slider(script.Parent.SliderFrame, function(value)
    print("Value:", value) -- 0–100, step 1
end)

Wiring up a Slider

luau
1
2
3
4
5
6
7
8
9
local InputsService = require(game.ReplicatedStorage.SlateUI.InputsService)
 
-- Expected hierarchy:
-- SliderFrame (Frame)
-- └─ Knob (Frame / ImageLabel)
 
InputsService.Slider(script.Parent.SliderFrame, function(value: number)
print("Slider →", value) -- 0 to 100
end)

Advanced — live-update a TextLabel with the value

luau
1
2
3
4
5
6
7
8
local slider = script.Parent.VolumeSlider
local label = script.Parent.VolumeLabel
 
InputsService.Slider(slider, function(value: number)
label.Text = "Volume: " .. value .. "%"
-- Drive game audio
SoundService.AmbientReverb = value / 100
end)

Text Input

Text() tweens a UIStroke from its default color to the SlateUI active color (slate-600, RGB 71 85 105) when the TextBox gains focus, and restores it on FocusLost. The callback receives both the final text and a boolean indicating whether Enter was pressed.

Interactive Preview

focused = false

Properties

Show error state
InputsService.Text(script.Parent.InputFrame, function(text: string, submitted: boolean)
    if submitted then print("Submitted:", text) end
end)

Wiring up a Text input

luau
1
2
3
4
5
6
7
8
9
10
-- Expected hierarchy:
-- InputFrame (Frame)
-- ├─ Input (TextBox)
-- └─ UIStroke
 
InputsService.Text(script.Parent.InputFrame, function(text: string, submitted: boolean)
if submitted then
print("Submitted:", text)
end
end)

Advanced — validate on submit, show error stroke

luau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
local frame = script.Parent.UsernameField
local stroke = frame:FindFirstChildOfClass("UIStroke")
 
InputsService.Text(frame, function(text: string, submitted: boolean)
if submitted then
if #text < 3 then
-- Flash a red stroke for invalid input
stroke.Color = Color3.fromRGB(239, 68, 68)
task.delay(1.5, function()
stroke.Color = Color3.fromRGB(42, 42, 42)
end)
else
print("Valid username:", text)
end
end
end)

Switch

Switch() toggles a boolean state on each MouseButton1 click. It tweens the Knob between two named position anchors (OnTarget and OffTarget) and tweens the UIStroke to the active color when on.

Interactive Preview

state = false

Properties

Start enabled
InputsService.Switch(script.Parent.SwitchFrame, function(state: boolean)
    print("Switch →", state)
end)

Wiring up a Switch

luau
1
2
3
4
5
6
7
8
9
10
-- Expected hierarchy:
-- SwitchFrame (Frame)
-- ├─ Knob (Frame)
-- ├─ UIStroke
-- ├─ OnTarget (Frame — marks the 'on' knob position)
-- └─ OffTarget (Frame — marks the 'off' knob position)
 
InputsService.Switch(script.Parent.SwitchFrame, function(state: boolean)
print("Switch is now:", state)
end)

Advanced — drive a setting from a switch

luau
1
2
3
4
5
6
7
8
9
local switch = script.Parent.MusicToggle
 
InputsService.Switch(switch, function(enabled: boolean)
if enabled then
SoundService.MusicVolume = 1
else
SoundService.MusicVolume = 0
end
end)

API

PropTypeDefaultDescription
InputsService.Slider(track: Frame, callback: (value: number) -> ())—Attaches drag logic to track. Requires a Knob child. Fires callback with 0–100.
InputsService.Text(frame: Frame, callback: (text: string, submitted: boolean) -> ())—Requires Input (TextBox) and UIStroke children. Fires callback on FocusLost.
InputsService.Switch(frame: Frame, callback: (state: boolean) -> ())—Requires Knob, UIStroke, OnTarget, and OffTarget children.