Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Footagesus/WindUI/llms.txt

Use this file to discover all available pages before exploring further.

Add a slider to a tab by calling :Slider({...}). The returned object lets you programmatically set its value and adjust its range.

Parameters

Title
string
Label displayed above or beside the slider track. Omit to show the slider without a title.
Desc
string
Secondary line of text rendered beneath the title.
Value
{ Min: number, Max: number, Default: number }
Table defining the slider range and starting position.
Value = {
  Min = 0,
  Max = 200,
  Default = 100,
}
Step
number
default:"1"
Increment between selectable values. Use a decimal like 0.1 for floating-point steps.
Width
number
default:"130"
Pixel width of the slider track.
IsTooltip
boolean
default:"false"
When true, a tooltip bubble showing the current value appears above the thumb while dragging.
IsTextbox
boolean
default:"true"
When true, a small text box next to the track shows the current value and accepts direct input. Defaults to false when Title is nil.
Icons
{ From: string, To: string }
Icon names placed on the left (From) and right (To) ends of the slider track.
Icons = {
  From = "sfsymbols:sunMinFill",
  To   = "sfsymbols:sunMaxFill",
}
Flag
string
Identifier used by the config system to save and restore this element’s value between sessions.
Locked
boolean
When true, dragging is disabled and the element is overlaid with a lock indicator.
Callback
function(value: number)
Called each time the value changes while dragging or when the user confirms a textbox entry. Receives the formatted number.

Methods

Moves the slider thumb to the given value, clamped to [Min, Max].
local mySlider = Tab:Slider({
  Title = "Slider",
  Step = 1,
  Value = { Min = 0, Max = 100, Default = 50 },
  Callback = function(v) print(v) end,
})

mySlider:Set(75)

Examples

Slider with tooltip, no textbox

Tab:Slider({
  Title = "Slider Example",
  Desc = "Hahahahaha hello",
  IsTooltip = true,
  IsTextbox = false,
  Width = 200,
  Step = 1,
  Value = {
    Min = 0,
    Max = 200,
    Default = 100,
  },
  Callback = function(value)
    print(value)
  end,
})

Slider without description

Tab:Slider({
  Title = "Slider Example",
  Step = 1,
  Width = 200,
  Value = {
    Min = 0,
    Max = 200,
    Default = 100,
  },
  Callback = function(value)
    print(value)
  end,
})

Slider without title (full-width track)

Omitting Title expands the track to fill the full element width. IsTextbox defaults to false in this case.
Tab:Slider({
  IsTooltip = true,
  Step = 1,
  Value = {
    Min = 0,
    Max = 200,
    Default = 100,
  },
  Callback = function(value)
    print(value)
  end,
})

Slider with a single icon (From only)

Tab:Slider({
  IsTooltip = true,
  Step = 1,
  Value = {
    Min = 0,
    Max = 200,
    Default = 100,
  },
  Icons = {
    From = "sfsymbols:sunMinFill",
  },
  Callback = function(value)
    print(value)
  end,
})

Slider with From and To icons

Tab:Slider({
  IsTooltip = true,
  Step = 1,
  Value = {
    Min = 0,
    Max = 100,
    Default = 50,
  },
  Icons = {
    From = "sfsymbols:sunMinFill",
    To   = "sfsymbols:sunMaxFill",
  },
  Callback = function(value)
    print(value)
  end,
})

Slider with Flag (config saving)

Tab:Slider({
  Flag = "SliderTest",
  Title = "Slider",
  Step = 1,
  Value = {
    Min = 20,
    Max = 120,
    Default = 70,
  },
  Callback = function(value)
    print(value)
  end,
})

Build docs developers (and LLMs) love