Slider

Range slider with numeric Lua onChange payloads

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

Builder

ui.slider(props)

Props

Prop	Type	Description
value	number | reactive getter	Current value. Defaults to min.
min	number	Minimum value. Defaults to 0.
max	number	Maximum value. Defaults to 100.
step	number	Step size. Defaults to 1.
onChange	function(payload)	Receives a payload with value = number.
thumbIcon, thumbIconComponent, icon, iconComponent	icon	Thumb icon.
rangeIcon, rangeIconComponent, fillIcon, fillIconComponent	icon	Icon rendered inside the filled range.
trackClassName	string	Track class.
rangeClassName, fillClassName	string	Filled range class.
thumbClassName	string	Thumb class.
inputClassName	string	Invisible range input class.

If max equals min, progress is treated as 0 to avoid invalid division.