LanternUI.Components.Slider (LanternUI v0.9.0)

Copy Markdown View Source

Slider — a single-thumb range input built on the WAI-ARIA APG slider pattern. No Fluxon equivalent; the form surface (field/name/value, label stack, errors) mirrors LanternUI's other form controls.

<.slider field={@form[:volume]} label="Volume" />
<.slider name="quality" value={80} min={0} max={100} step={5} label="Quality" value_text="{value}%" />

The value lives in a hidden input (the real form control), so phx-change and form submits see it exactly like a native input. The slider is Zag-driven (a @zag-js/slider state machine, loaded on demand): the hook root carries data-zag plus data-scope="slider" / data-part anatomy, and Zag owns the value, pointer drag, and keyboard stepping while the hidden input stays the form surface. Drag moves update visuals only and the release commits (hidden input + input/change); keyboard steps commit immediately. Styling stays lui-* tokens. Two modes:

  • client (default) — Zag owns the value from the initial value.
  • server-driven (controlled) — the server value (value) is truth; commits flow out through on_change, patches flow in.

value_text is a template for aria-valuetext — {value} is replaced with the current value (server-side on render, client-side as the hook moves the thumb). Give the slider a label; without one the accessible name falls back to the input name.

Summary

Functions

slider(assigns)

Functions

slider(assigns)

Attributes

  • id (:any) - Element id. Derived from field when omitted; with a bare name it falls back to name (the id feeds the hook, so it must stay stable — never auto-generated).

    Defaults to nil.

  • name (:string) - Form input name; derived from field when omitted. Defaults to nil.

  • value (:any) - Current value; clamped to min..max, defaults to min. Defaults to nil.

  • field (Phoenix.HTML.FormField) - Form field; derives id, name, value, and errors. Defaults to nil.

  • min (:any) - Minimum value. Defaults to 0.

  • max (:any) - Maximum value. Defaults to 100.

  • step (:any) - Step increment; PageUp/PageDown jump 10 steps. Defaults to 1.

  • value_text (:string) - Template for aria-valuetext; {value} interpolates, e.g. "{value}%". Defaults to nil.

  • label (:string) - Primary label above the control. Defaults to nil.

  • sublabel (:string) - Secondary label line under the primary label. Defaults to nil.

  • description (:string) - Helper text under the label stack. Defaults to nil.

  • errors (:list) - Validation messages; derived from field when used. Defaults to [].

  • size (:string) - Field density / type scale. Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".

  • disabled (:boolean) - Render disabled and non-interactive. Defaults to false.

  • class (:any) - Extra classes merged onto the root element. Defaults to nil.

  • controlled (:boolean) - Server-driven value: value is truth, patches flow into the machine. Defaults to false.

  • on_change (:string) - Server event pushed on commit (lantern:slider:set-value replies). Defaults to nil.

  • on_change_client (:string) - Bubbling DOM CustomEvent dispatched on commit. Defaults to nil.

  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through (ride on the hidden input). Supports all globals plus: ["form", "phx-change", "phx-target"].