PetalComponents.NumberTicker (petal_components v4.1.0)

Copy Markdown View Source

A number that counts up (or down) to its value when it scrolls into view, and re-animates whenever the value changes — perfect for stats sections and live dashboards.

Requires the PetalNumberTicker hook from the JS bundle. The final value is rendered server-side, so the component degrades gracefully without JavaScript.

Summary

Functions

number_ticker(assigns)

Renders an animated counter.

Functions

number_ticker(assigns)

Renders an animated counter.

<.number_ticker id="stars-count" value={5200} suffix="+" class="text-4xl font-bold" />

In a LiveView, updating the assign re-animates from the previous value to the new one:

<.number_ticker id="mrr" value={@mrr} prefix="$" decimal_places={2} />

Attributes

  • id (:string) (required)
  • value (:any) (required) - the target number (integer or float).
  • start_value (:any) - where the first animation counts from. Defaults to 0.
  • duration (:integer) - animation length in milliseconds. Defaults to 1500.
  • decimal_places (:integer) - decimal places to show while counting. Defaults to 0.
  • prefix (:string) - e.g. "$". Defaults to nil.
  • suffix (:string) - e.g. "+" or "%". Defaults to nil.
  • locale (:string) - BCP 47 locale for number formatting (e.g. "de-DE"); defaults to the browser locale. Defaults to nil.
  • class (:any) - extra classes (set font size/weight here). Defaults to nil.
  • Global attributes are accepted.