UI Widgets

apps/ui_widgets shows the retained UI’s interactive widgets beyond the button: a toggle (checkbox), a slider, a display-only progress bar, and a mutually-exclusive radio group. Each holds its state in the document — a click flips the toggle, a drag sets the slider, clicking a radio selects it — and the game polls that state each frame.

What it demonstrates

• A type = "toggle" element renders a box that fills with check_color when checked; a click flips it. A type = "slider" renders a track with a filled portion and a handle at value; dragging sets value in [min, max].
• A type = "progress" bar mirrors the slider’s value/range model but is display-only — no handle, no interaction; the game moves its fill by setting element.value.
• A Low / High type = "radio" group: two radios that share the same group string are mutually exclusive, so clicking one selects it and deselects the other, and a radio never toggles back off. The game reads the selection by polling each radio’s element.checked.
• The game reads element.checked and element.value every frame (via Ui.get) and drives a “swatch” panel — its colour follows the slider, and it greys out when the toggle is off. This is the retained model: widgets own their state; the game reads it (no per-frame callbacks required, though an optional on_change handler dispatches to Game.<name>()).

var amount = Ui.get(_doc, "amount")   // a slider
var enable = Ui.get(_doc, "enable")   // a toggle
if (enable.checked) {
  swatch.color = [0.2 + 0.6 * amount.value, 0.35 * amount.value, 0.9 * amount.value, 1.0]
}

The widgets are authored in the .ui file like any element — see the Ui API for the toggle/slider/progress/radio fields, and the UI Editor can add them visually.