Phoenix implementation of Zag.js Angle Slider.

Examples

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, :angle, 0)}
  end

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

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

API Control

In order to use the API, you must use an id on the component.

Client-side

<button phx-click={Corex.AngleSlider.set_value("my-angle-slider", 90)}>
  Set to 90°
</button>

Server-side

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

Styling

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

Learn more about modifiers and Corex Design