LanternUI.Components.Slider (LanternUI v0.8.2)

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 LanternSlider hook owns the interaction: pointer drag on the track, and Arrow/Home/End/ PageUp/PageDown value stepping on the role="slider" thumb. Keyboard steps and drag release commit the value (the hook writes the hidden input and dispatches bubbling input/change); intermediate drag moves only update the visuals and aria-valuenow.

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.

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