Number Input

Event

Subscribe to value changes from LiveView or the client.

On Value Change (Server)

Quantity

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.number_input
  class="number-input"
  on_value_change="number_input_changed"
>
  <:label>Quantity</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>

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

On Value Change (Client)

Quantity

Time	Source	Value
No event yet. Interact with the components to receive new events

    <.number_input
  class="number-input"
  on_value_change_client="number-input-changed"
>
  <:label>Quantity</:label>
  <:decrement_trigger><.heroicon name="hero-chevron-down" class="icon" /></:decrement_trigger>
  <:increment_trigger><.heroicon name="hero-chevron-up" class="icon" /></:increment_trigger>
</.number_input>

    const el = document.getElementById("number-input-events-client");
el?.addEventListener("number-input-changed", (event) => console.log(event.detail));

    const el = document.getElementById("number-input-events-client");
el?.addEventListener("number-input-changed", (event: Event) =>
  console.log((event as CustomEvent<unknown>).detail)
);