Angle Slider · Pattern

    <.async_result :let={angle_slider} assign={@angle_slider}>
  <:loading>
    <.angle_slider_skeleton class="angle-slider" />
  </:loading>

  <.angle_slider
    id={@id_async}
    class="angle-slider"
    value={angle_slider.value}
    marker_values={[0.0, 90.0, 180.0, 270.0]}
  >
    <:label>Angle</:label>
  </.angle_slider>
</.async_result>

  

    def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign(:id_async, "patterns-angle-slider-async")
   |> assign_async(:angle_slider, fn ->
     Process.sleep(1000)
     {:ok, %{angle_slider: %{value: 90.0}}}
   end)}
end

  

    <.angle_slider
  class="angle-slider"
  marker_values={[0.0, 90.0, 180.0, 270.0]}
  controlled
  value={@value}
  on_value_change="patterns_controlled_changed"
>
  <:label>Angle</:label>
</.angle_slider>

  

    def mount(_params, _session, socket) do
  {:ok,
   socket
   |> assign(:id_controlled, "patterns-angle-slider-controlled")
   |> assign(:value, 90.0)}
end

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