Linear slider for Phoenix LiveView forms. Behavior follows Zag.js Slider (the same machine powers range slider). Use slider/1 with one value for a single thumb, or a list for multiple thumbs.

Anatomy

Basic

<.slider class="slider">
  <:label>Volume</:label>
</.slider>

Range

<.slider class="slider" value={[20, 80]}>
  <:label>Price</:label>
</.slider>

With marks

<.slider class="slider" markers marker_values={[0, 25, 50, 75, 100]}>
  <:label>Volume</:label>
</.slider>

API

Requires a stable id on <.slider>.

For value, use respond_to: :server | :client | :both. LiveView receives slider_value_response; the DOM receives slider-value.

Events

Pick an event name and pass it to on_* on <.slider>.

Server events

on_value_change

<.slider
  class="slider"
  on_value_change="slider_changed"
  markers marker_values={[0, 25, 50, 75, 100]}
>
  <:label>Volume</:label>
</.slider>

def handle_event("slider_changed", %{"value" => value}, socket) do
  {:noreply, assign(socket, :value, value)}
end

Client events

Style

Use data attributes to target elements:

[data-scope="slider"][data-part="root"] {}
[data-scope="slider"][data-part="control"] {}
[data-scope="slider"][data-part="track"] {}
[data-scope="slider"][data-part="range"] {}
[data-scope="slider"][data-part="thumb"] {}
[data-scope="slider"][data-part="value-text"] {}
[data-scope="slider"][data-part="marker-group"] {}
[data-scope="slider"][data-part="marker"] {}

If you wish to use the default Corex styling, you can use the class slider on the component. This requires the corex_design dependency and mix corex.design.build; import the component css file.

@import "../corex/corex.css";

Stack modifiers on the host (class on <.slider>). Combine axes, for example slider ui-accent ui-size-lg or slider ui-info.

Axes: Semantic (ui-accent, ui-brand, ui-alert, ui-info, ui-success), Size (ui-size-sm … ui-size-xl), Radius (ui-rounded-*). No variant axis. See the modifier guide.

Semantic modifiers set palette variables on the track fill and thumb handle. Selection paint always fills; there is no variant axis.

Semantic

Palette variables for range fill and thumb ink.

Size

Patterns

Async and skeleton

Use assign_async/3 with <.async_result> and show slider_skeleton/1 while loading.

<.async_result :let={slider} assign={@slider}>
  <:loading>
    <.slider_skeleton class="slider" />
  </:loading>
  <:failed>Could not load.</:failed>
  <.slider id="async-slider" class="slider" value={slider.value} />
</.async_result>

Form

When using with Phoenix forms, set the form id in to_form/2 (for example to_form(changeset, as: :name, id: "my-form")) and use <.form for={@form}>.

A single thumb submits one number. Two or more thumbs submit name[] list params.

For cross-cutting invalid styling and error presentation, see the Forms guide. With field={@form[:…]}, pass auto_invalid for alert borders from visible errors, or invalid={true} to force the alert state.

def slider_form_page(conn, _params) do
  form =
    %MyApp.Form.SliderForm{}
    |> MyApp.Form.SliderForm.changeset(%{})
    |> Phoenix.Component.to_form(as: :slider_form, id: "slider-form")

  render(conn, :slider_form_page, form: form)
end

<.form :let={f} for={@form} action={@action} method="post">
  <.slider field={f[:volume]} class="slider" markers marker_values={[0, 25, 50, 75, 100]}>
    <:label>Volume</:label>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.slider>
  <button type="submit">Submit</button>
</.form>