Circular angle control for Phoenix LiveView forms. Behavior follows Zag.js Angle Slider. WAI-ARIA circular angle control. Use angle_slider/1 with an optional label slot and marks.

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>

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 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 <.angle_slider>). Combine axes, for example angle-slider ui-accent ui-size-lg or angle-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 control and thumb handle. Selection paint always fills; there is no variant axis.

Semantic

Palette variables for control fill and thumb ink.

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. With field={@form[:…]}, pass auto_invalid for alert borders from visible errors, or invalid={true} to force the alert state.

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>