Angle Slider · Event

    <.angle_slider
  class="angle-slider"
  marker_values={[0.0, 90.0, 180.0, 270.0]}
  on_value_change="angle_slider_changed"
>
  <:label>on change</:label>
</.angle_slider>

<.angle_slider
  class="angle-slider"
  marker_values={[0.0, 90.0, 180.0, 270.0]}
  value={90.0}
  on_value_change_end="angle_slider_change_ended"
>
  <:label>on end</:label>
</.angle_slider>

  

    def handle_event("angle_slider_changed", %{"id" => id, "value" => value} = params, socket) do
  IO.inspect(params, label: "angle_slider_changed")
  {:noreply, socket}
end

def handle_event("angle_slider_change_ended", %{"id" => id, "value" => value} = params, socket) do
  IO.inspect(params, label: "angle_slider_change_ended")
  {:noreply, socket}
end
  

    <.angle_slider
  class="angle-slider"
  marker_values={[0.0, 90.0, 180.0, 270.0]}
  on_value_change_client="angle-slider-changed"
>
  <:label>on_value_change_client</:label>
</.angle_slider>

<.angle_slider
  class="angle-slider"
  marker_values={[0.0, 90.0, 180.0, 270.0]}
  value={90.0}
  on_value_change_end_client="angle-slider-change-ended"
>
  <:label>on_value_change_end_client</:label>
</.angle_slider>

  

    const a = document.getElementById("events-angle-slider-on-value-change-client");
const b = document.getElementById("events-angle-slider-on-value-change-end-client");
a?.addEventListener("angle-slider-changed", (event) => console.log(event.detail));
b?.addEventListener("angle-slider-change-ended", (event) => console.log(event.detail));

  

    type Detail = { id: string; value: number; valueAsDegree?: number; dragging?: boolean };
const a = document.getElementById("events-angle-slider-on-value-change-client");
const b = document.getElementById("events-angle-slider-on-value-change-end-client");
a?.addEventListener("angle-slider-changed", (event: Event) => console.log((event as CustomEvent<Detail>).detail));
b?.addEventListener("angle-slider-change-ended", (event: Event) => console.log((event as CustomEvent<Detail>).detail));