Slider

Properties

Property	Type	Description
min	number	Sliders minimum value
max	number	Sliders maximum value
defaultValue	number, array	Sliders default value
disabled	boolean	Weather slider is disabled for use
tooltipOpen	boolean, nil	How the tooltip should be handled
tooltipPlacement	See TooltipPlacement	How the tooltip should be handled
step	number	How big steps the slider takes
vertical	boolean	Weather slider should be vertical
autoFocuss	boolean	When true slider will be focused when mounted
keyboard	boolean	When true slider can be moved with keyboard
dots	boolean	"Whether the thumb can drag over tick only"
range	boolean	When true the slider has 2 thumbs
reverse	boolean	When true the slider is reversed
[events]	function	Please read the events page

All properties are optional.

See more properties here

Children

Not supported on slider.

Example

local slider = myUI:createElement("Slider", {
    width = "200px",
    min = 0,
    max = 500,
    defaultValue = 100,
    step = 5.0,
    onAfterChange = function(elementId, uiName, value)
        print("onAfterChange: ", elementId, uiName, value)
    end,
    onChange = function(elementId, uiName, value)
        print("onChange: ", elementId, uiName, value)
    end,
})

This is how it looks in-game:

Min

The minumum value the slider can be set to.

Max

The maximum value the slider can be set to.

Default Value

The value the slider will start with.

In the showcased example the starting value is 100.

When range is true the defaultValue should be an array, like:

defaultValue = {25, 75}

Disabled

When true the slider will be disabled.

Which means the user will not be able to move the slider.

TooltipOpen

When undefined/nil the tooltip will show when the user is interacting with the slider.

When true the tooltip will always show.

When false the tooltip will never show.

TooltipPlacement

Sets the direction of the tooltip.

It's a string and can be any of the following:

top, left, right, bottom, topLeft, topRight, bottomLeft, bottomRight, leftTop, leftBottom, rightTop, rightBottom

Step

Sets the amount the slider "steps" with each time.

This is how it looks with a step equal to 0.5

Vertical

When true the slider will be displayed vertically instead of horizontally

Auto Focus

When true the slider will be focused when the UI is shown.

Keyboard

When true the slider can be controlled with the keyboard aswell as the mouse.

Dots

I'm not actually sure what this does.

The Ant Design description is "Whether the thumb can drag over tick only".

Range

When true the slider will have 2 end and both can be moved.

Note value in onAfterChange and onChange is now an array.

local slider = myUI:createElement("Slider", {
    width = "200px",
    min = 0,
    max = 100,
    defaultValue = {25, 75},
    onAfterChange = function(id, name, value)
        local min = value[1]
        local max = value[2]
        print("Min: " .. min .. " - Max: " .. max)
    end,
})

Reverse

Flips/Reverses the slider.