Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt

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

​
Slider

Slider renders a range input with custom track, range, and thumb surfaces. It sends a payload with value = number to Lua on change. 
local amount, setAmount = track.state('amount', 3)

lui.page('amount', function(ui)
  ui.slider({
    min = 0,
    max = 10,
    step = 1,
    value = amount,
    rangeIconComponent = 'lucide:minus',
    thumbIcon = {
      name = 'lucide:circle',
      width = 10
    },
    onChange = function(payload)
      setAmount(payload.value)
    end
  })
end)

​
API

ui.slider(props)

​
Props

PropTypeDescription
valuenumber | reactive getterCurrent value. Defaults to min.
minnumberMinimum value. Defaults to 0.
maxnumberMaximum value. Defaults to 100.
stepnumberStep size. Defaults to 1.
onChangefunction(payload)Receives a payload with value = number.
thumbIcon, thumbIconComponent, icon, iconComponenticonThumb icon.
rangeIcon, rangeIconComponent, fillIcon, fillIconComponenticonIcon rendered inside the filled range.
trackClassNamestringTrack class.
rangeClassName, fillClassNamestringFilled range class.
thumbClassNamestringThumb class.
inputClassNamestringInvisible range input class.
If max equals min, progress is treated as 0 to avoid invalid division.