PhiaUi.Components.Slider (phia_ui v0.1.17)

Copy Markdown View Source

Range slider component for continuous numeric value selection.

slider/1 is a CSS-only input[type=range] with semantic Tailwind tokens and full WAI-ARIA attributes. form_slider/1 integrates it with Phoenix.HTML.FormField and Ecto changesets, adding label, description, and error display.

No JavaScript is required — the browser handles all drag, click, and keyboard interaction natively.

Enhancements

  • marks — renders tick marks + labels below the track at specified values
  • vertical — rotates the slider 90° for vertical orientation
  • show_value — renders a badge above the thumb showing the current value

Examples

<%!-- Basic slider --%>
<.slider value={50} phx-change="update_value" name="value" />

<%!-- With marks --%>
<.slider value={@speed} min={0} max={100} step={25}
         marks={[%{value: 0, label: "Slow"}, %{value: 100, label: "Fast"}]}
         phx-change="set_speed" name="speed" />

<%!-- Vertical orientation --%>
<.slider value={@vol} vertical={true} phx-change="set_vol" name="vol" />

<%!-- Show current value badge --%>
<.slider value={@size} min={8} max={72} show_value={true} phx-change="set_size" name="size" />

Summary

Functions

form_slider(assigns)

Renders a form-integrated slider with label, description, and changeset errors.

slider(assigns)

Renders a range slider input.

Functions

form_slider(assigns)

Renders a form-integrated slider with label, description, and changeset errors.

Attributes

  • field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField struct.
  • label (:string) - Text rendered in a <label> above the slider. Defaults to nil.
  • description (:string) - Helper text rendered below the label. Defaults to nil.
  • min (:integer) - Minimum allowed value. Defaults to 0.
  • max (:integer) - Maximum allowed value. Defaults to 100.
  • step (:integer) - Step increment between valid values. Defaults to 1.
  • marks (:list) - List of tick mark maps: [%{value: N, label: "text"}]. Defaults to [].
  • vertical (:boolean) - Vertical orientation. Defaults to false.
  • show_value (:boolean) - Show current value badge above thumb. Defaults to false.
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the <input> element. Supports all globals plus: ["phx-change", "phx-blur", "phx-debounce", "disabled"].

slider(assigns)

Renders a range slider input.

When marks, vertical, or show_value are used the slider is wrapped in a positioned <div> container. Otherwise a bare <input> is rendered (backward-compatible with existing usage).

Attributes

  • value (:integer) - The current value of the slider. Defaults to 0.

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

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

  • step (:integer) - Step increment between valid values. Defaults to 1.

  • disabled (:boolean) - When true, disables the slider. Defaults to false.

  • marks (:list) - List of tick mark maps: [%{value: 0, label: "Min"}, %{value: 100, label: "Max"}]. Marks are positioned below the track at their corresponding percentage.

    Defaults to [].

  • vertical (:boolean) - When true, renders the slider in vertical orientation (rotated 90°). Defaults to false.

  • show_value (:boolean) - When true, renders a badge above the thumb showing the current value. Defaults to false.

  • class (:string) - Additional CSS classes. Defaults to nil.

  • Global attributes are accepted. HTML attributes forwarded to the <input> element. Supports all globals plus: ["phx-change", "phx-blur", "name", "id"].