fader

DAW-style vertical fader built on canvas interaction props. Draws track + fill + cap as rect commands plus a centred grip line, and wires drag / click / double-click handlers via widgetState. Drag and click both project the pointer Y onto the track — grabbing or clicking anywhere snaps the cap to that Y. Double-click resets to defaultValue when set.

Exports

• fader(id: string, value: number?, lo: number?, hi: number?, opts: FaderOpts?) -> WidgetNode — build the fader canvas. Auto-registers <id>:drag, <id>:click, <id>:reset handlers (deduped). When opts.tooltip is set, the canvas is wrapped in a transparent panel that hosts the tooltip.

Types:

• FaderOpts = { defaultValue: number?, onChange: string?, tooltip: string?, style: { [string]: any }?, width: number?, height: number?, trackColor: string?, capColor: string?, fillColor: string?, app: any? }
• WidgetNode = { [string]: any }

Usage

local Z = require("@builtin::modules.zui")

Z.fader("master-volume", state.volume, 0, 1, {
    defaultValue = 0.8,
    onChange     = "audio:volume",
})

app:on("audio:volume", function(v)
    state.volume = v   -- the new numeric value
end)

Notes

• Track top = hi, track bottom = lo (egui +y is down). Pointer Y is projected onto the track range to produce the new value, then clamped to [min(lo,hi), max(lo,hi)].
• Per-id handlers are deduped — re-renders don't accumulate listeners. Mutating width/height between renders means the first render's geometry wins (matches every other auto-stash widget).
• Double-click is a no-op when opts.defaultValue is nil.