PhiaUi.Components.Data.MarkerBar (phia_ui v0.1.17)

Copy Markdown View Source

Progress bar with a positioned marker indicator.

Inspired by Tremor's MarkerBar component. Renders a horizontal bar with a vertical marker at a specific position. Useful for showing current value against a range.

Examples

<.marker_bar value={62} />
<.marker_bar value={80} color="oklch(0.60 0.20 240)" show_animation />

Summary

Functions

marker_bar(assigns)

Functions

marker_bar(assigns)

Attributes

  • value (:any) (required) - Marker position (0-100).
  • color (:string) - Marker color. Defaults to primary. Defaults to nil.
  • show_animation (:boolean) - Animate the marker position. Defaults to false.
  • tooltip (:string) - Tooltip text. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.