API

    <.action phx-click={Corex.Slider.set_value("api-slider", 0)}>Set to 0</.action>
<.action phx-click={Corex.Slider.set_value("api-slider", 25)}>Set to 25</.action>
<.action phx-click={Corex.Slider.set_value("api-slider", 50)}>Set to 50</.action>
<.action phx-click={Corex.Slider.set_value("api-slider", 75)}>Set to 75</.action>
<.slider class="slider" markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
  <:label>Volume</:label>
</.slider>

  

    <.action phx-click={Corex.Slider.set_value("api-slider-range", [0, 100])}>0 – 100</.action>
<.action phx-click={Corex.Slider.set_value("api-slider-range", [20, 80])}>20 – 80</.action>
<.action phx-click={Corex.Slider.set_value("api-slider-range", [25, 75])}>25 – 75</.action>
<.action phx-click={Corex.Slider.set_value("api-slider-range", [40, 60])}>40 – 60</.action>
<.slider class="slider" value={[20, 80]} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
  <:label>Price</:label>
</.slider>

  

    <.action
  phx-click={
    JS.dispatch("corex:slider:set-value",
      to: "#api-slider-client-js",
      detail: %{value: [25]},
      bubbles: false
    )
  }
>
  Set to 25
</.action>
<.slider class="slider" markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
  <:label>Volume</:label>
</.slider>

  

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

  

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

  

    <.action
  phx-click={
    JS.dispatch("corex:slider:set-value",
      to: "#api-slider-range-js",
      detail: %{value: [25, 75]},
      bubbles: false
    )
  }
>
  25 – 75
</.action>
<.slider class="slider" value={[20, 80]} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]}>
  <:label>Price</:label>
</.slider>

  

    const el = document.getElementById("api-slider-range-js")
el?.dispatchEvent(new CustomEvent("corex:slider:set-value", {
  detail: { value: [25, 75] },
  bubbles: false
}))

  

    const el: HTMLElement | null = document.getElementById("api-slider-range-js")
el?.dispatchEvent(
  new CustomEvent<{ value: number[] }>("corex:slider:set-value", {
    detail: { value: [25, 75] },
    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="25" class="button ui-size-sm">Server: 25</.action>
<.action phx-click="api_set_value" value="50" class="button ui-size-sm">Server: 50</.action>
<.action phx-click="api_set_value" value="75" class="button ui-size-sm">Server: 75</.action>

  

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

  

    <.action phx-click="api_set_range_value" phx-value-lo="0" phx-value-hi="100" class="button ui-size-sm">
  Server: 0 – 100
</.action>
<.action phx-click="api_set_range_value" phx-value-lo="20" phx-value-hi="80" class="button ui-size-sm">
  Server: 20 – 80
</.action>

  

    def handle_event("api_set_range_value", %{"lo" => lo, "hi" => hi}, socket) do
  {:noreply, Corex.Slider.set_value(socket, "api-slider-range-server", [lo, hi])}
end