API

    <.action phx-click={Corex.AngleSlider.set_value("api-angle-slider", 0.0)}>Set to 0°</.action>
<.action phx-click={Corex.AngleSlider.set_value("api-angle-slider", 90.0)}>Set to 90°</.action>
<.action phx-click={Corex.AngleSlider.set_value("api-angle-slider", 180.0)}>Set to 180°</.action>
<.action phx-click={Corex.AngleSlider.set_value("api-angle-slider", 270.0)}>Set to 270°</.action>
<.angle_slider class="angle-slider" markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Angle</:label>
</.angle_slider>

  

    <.action
  phx-click={
    JS.dispatch("corex:angle-slider:set-value",
      to: "#api-angle-slider-client-js",
      detail: %{value: 90.0},
      bubbles: false
    )
  }
>
  Set to 90°
</.action>
<.angle_slider class="angle-slider" markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Angle</:label>
</.angle_slider>

  

    const el = document.getElementById("api-angle-slider-client-js")
el?.dispatchEvent(new CustomEvent("corex:angle-slider:set-value", {
  detail: { value: 90.0 },
  bubbles: false
}))

  

    const el: HTMLElement | null = document.getElementById("api-angle-slider-client-js")
el?.dispatchEvent(
  new CustomEvent<{ value: number }>("corex:angle-slider:set-value", {
    detail: { value: 90.0 },
    bubbles: false
  })
)

  

    <.action phx-click="api_set_value" value="0" class="button ui-size-sm">Server: 0°</.action>
<.action phx-click="api_set_value" value="90" class="button ui-size-sm">Server: 90°</.action>
<.action phx-click="api_set_value" value="180" class="button ui-size-sm">Server: 180°</.action>
<.action phx-click="api_set_value" value="270" class="button ui-size-sm">Server: 270°</.action>

  

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