Skip to content

Slider

Slider lets the user choose a number from a range by dragging a handle. The handle grows while the user presses it.

Usage

Call Components.Slider with a scope and a table of properties:

C.Slider(scope, {
    Label = "Volume",
    Min = 0,
    Max = 100,
    Step = 1,
    Value = 40,
    OnChanged = function(value)
        print("Volume", value)
    end,
})

Properties

Name Type Required Default Description
Theme ThemeRef ❌ The contextual theme Theme to use for this component instead of the one from Theme.Provide.
LayoutOrder UsedAs<number> ❌ 0 Position in a parent UIListLayout or UIGridLayout.
Size UsedAs<UDim2> ❌ - Size of the component.
Value UsedAs<number> ❌ Min The value. A plain value is only the starting value. A Value stays in step with the control: the user's changes set it, and setting it changes the control.
Min number ❌ 0 Lowest value.
Max number ❌ 1 Highest value.
Step number ❌ 0.01 Size of one step. The value snaps to a multiple of it.
Disabled UsedAs<boolean> ❌ false Stops the slider reacting to input. The component reads this once, when it creates the slider.
Label UsedAs<string> ❌ - Text above the slider. The current value appears after it, in brackets.
Id string ❌ - Key that identifies this component when state is kept across rebuilds. See Persist.

Callbacks

Name Description
OnChanged: (number) -> () Runs with the new value as the user drags.

See also