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 class="angle-slider">
  <:label>Angle</:label>
</.angle_slider>

With marks

<.angle_slider 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

Requires a stable id on <.angle_slider>.

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

Events

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

Server events

on_value_change

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

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

Client events

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";

Stack modifiers on the host (class on <.angle_slider>).

Color

Size

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 <.form for={@form}>.

For cross-cutting invalid styling and error presentation, see the Forms guide. Pass invalid={Corex.FormField.invalid?(@form[:angle])} when you want alert borders after validation.

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} 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>