Event

    <.slider
  class="slider"
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  on_value_change="slider_changed"
>
  <:label>On Change</:label>
</.slider>

<.slider
  class="slider"
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  value={50.0}
  on_value_change_end="slider_change_ended"
>
  <:label>On End</:label>
</.slider>

  

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

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

    <.slider
  class="slider"
  value={[20, 80]}
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  on_value_change="slider_changed"
>
  <:label>On Change</:label>
</.slider>

<.slider
  class="slider"
  value={[20, 80]}
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  on_value_change_end="slider_change_ended"
>
  <:label>On End</:label>
</.slider>

  

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

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

    <.slider
  class="slider"
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  on_value_change_client="slider-changed"
>
  <:label>On Change</:label>
</.slider>

<.slider
  class="slider"
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  value={50.0}
  on_value_change_end_client="slider-change-ended"
>
  <:label>On End</:label>
</.slider>

  

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

  

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

  

    <.slider
  class="slider"
  value={[20, 80]}
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  on_value_change_client="slider-changed"
>
  <:label>On Change</:label>
</.slider>

<.slider
  class="slider"
  value={[20, 80]}
  markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}
  on_value_change_end_client="slider-change-ended"
>
  <:label>On End</:label>
</.slider>

  

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

  

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