Angle Slider · Pattern
Common ways to structure Angle Slider state and data flows.
Async
<.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
Controlled (LiveView)
<.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