Phoenix implementation of Zag.js Angle Slider.

WAI-ARIA circular angle control. Use angle_slider/1 with an optional label slot, marks, and controlled or uncontrolled mode.

Anatomy

Basic

<.angle_slider id="angle" class="angle-slider">
  <:label>Angle</:label>
</.angle_slider>

With marks

<.angle_slider id="angle" class="angle-slider" marker_values={[0, 90, 180, 270]}>
  <:label>Angle</:label>
</.angle_slider>

Controlled

In controlled mode, use on_value_change and on_value_change_client so the thumb moves during drag. Use on_value_change_end and on_value_change_end_client if you only need to react when the user releases.

defmodule MyAppWeb.AngleSliderLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :value, 0)}
  end

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

  def render(assigns) do
    ~H"""
    <.angle_slider
      id="angle"
      controlled
      value={@value}
      on_value_change="angle_changed"
      marker_values={[0, 90, 180, 270]}
      class="angle-slider">
      <:label>Angle</:label>
    </.angle_slider>
    """
  end
end

API

See API.

LiveView

The API targets one angle slider via its DOM id (the same id you pass to angle_slider/1).

• set_value/2 and set_value/3
• value/2 and value/3

For value, use respond_to: :server | :client | :both to control whether the response is pushed to LiveView, dispatched as a DOM event, or both.

<.action phx-click={Corex.AngleSlider.set_value("my-angle-slider", 90)}>Set 90°</.action>
<.action phx-click={Corex.AngleSlider.value("my-angle-slider")}>Read value</.action>
<.action phx-click={Corex.AngleSlider.value("my-angle-slider", respond_to: :client)}>
  Read value (client only)
</.action>

def handle_event("set_angle", %{"value" => value}, socket) do
  {:noreply, Corex.AngleSlider.set_value(socket, "my-angle-slider", String.to_float(value))}
end

From LiveView, Corex.AngleSlider.set_value/3 and value/3 use push_event/3 to the hook; optional respond_to: :server | :client | :both controls where the answer goes for value/3.

Responses to LiveView (push_event from the hook; handle in handle_event/3):

• angle_slider_value_response - %{"id" => ..., "value" => number, "valueAsDegree" => number, "dragging" => boolean}

Client (DOM)

From the client, dispatch CustomEvents on the hook root (the element with id, e.g. #my-angle-slider):

Responses to the DOM (listen on the hook root element):

• angle-slider-value - detail with id, value, valueAsDegree, and dragging

Events

See Events.

Server (LiveView)

When phx-hook="AngleSlider" is active, Zag maps drag and value updates to your LiveView:

• on_value_change - pushEvent/3 with the name you set. Params include %{"id" => dom_id, "value" => number, "valueAsDegree" => number}.
• on_value_change_end - same for the release event when you only care about the final value.

Client (CustomEvent / DOM)

• on_value_change_client - browser CustomEvent type is the string you set. event.detail matches the same shape (camelCase in JS; bubbles).
• on_value_change_end_client - same pattern for the release event.

Style

Use data attributes to target elements:

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

If you wish to use the default Corex styling, you can use the class angle-slider on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/angle-slider.css";

You can then use modifiers

<.angle_slider class="angle-slider angle-slider--accent angle-slider--lg" value={0} />

Patterns

Async and skeleton

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

<.async_result :let={slider} assign={@slider}>
  <:loading>
    <.angle_slider_skeleton class="angle-slider" />
  </:loading>
  <:failed>Could not load.</:failed>
  <.angle_slider id="async-angle" class="angle-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 id={@form.id} on <.form>.

def angle_slider_form_page(conn, _params) do
  form =
    %MyApp.Form.AngleSliderForm{}
    |> MyApp.Form.AngleSliderForm.changeset(%{})
    |> Phoenix.Component.to_form(as: :angle_slider_form, id: "angle-slider-form")

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

<.form :let={f} for={@form} id={@form.id} action={@action} method="post">
  <.angle_slider field={f[:angle]} class="angle-slider" marker_values={[0, 90, 180, 270]}>
    <:label>Angle</:label>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.angle_slider>
  <button type="submit">Submit</button>
</.form>