This plugin includes TWO elements:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ELEMENT 1 — Gauge (Solid Color Zones)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Clean half-circle gauge with distinct low, mid and high color zones. Best for simple dashboards and scorecards.

RECOMMENDED SIZE:
  Width → 400px | Height → 300px

FIELDS:
  • value          → dynamic number to display
  • min_value      → start of your range (default 0)
  • max_value      → end of your range (default 100)
  • low_color      → color for low zone (default green)
  • mid_color      → color for mid zone (default amber)
  • high_color     → color for high zone (default red)
  • low_threshold  → % where low zone ends (default 33)
  • high_threshold → % where high zone starts (default 66)
  • show_value     → yes / no — show value number
  • show_min_max   → yes / no — show min and max labels
  • label          → text below value e.g. Credit Score
  • needle_color   → needle and value text color (hex)
  • track_color    → background arc color (hex)
  • font_size      → text size in px (default 16)
  • unit           → suffix after value e.g. km/h or %
                     leave empty for no unit

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ELEMENT 2 — Gauge Pro (Gradient + Ticks)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Modern gauge with smooth gradient arc, tick marks and triangle needle with shadow. Best for premium dashboards and data-heavy apps.

RECOMMENDED SIZE:
  Width → 400px | Height → 300px

FIELDS — same as Gauge plus:
  • show_ticks → yes / no — show tick marks and labels

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
SHARED STATES (both elements):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • current_value → current clamped value
  • current_zone  → low / mid / high

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
UNDERSTANDING THRESHOLDS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
low_threshold and high_threshold define where each color zone starts and ends as a percentage of the total range.

Example with default values (33 and 66), min 0, max 100:
  0 to 33  → Low zone  (low_color)
  33 to 66 → Mid zone  (mid_color)
  66 to 100→ High zone (high_color)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
COMMON SETUPS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Credit Score (reverse colors — higher is better):
  min_value  → 300
  max_value  → 850
  low_color  → #ef4444 (red — bad)
  mid_color  → #f59e0b (amber)
  high_color → #22c55e (green — good)
  unit       → (empty)
  label      → Credit Score

Speed / Performance:
  min_value       → 0
  max_value       → 200
  low_threshold   → 40
  high_threshold  → 75
  unit            → km/h
  label           → Speed

Percentage / Goal:
  min_value  → 0
  max_value  → 100
  unit       → %
  label      → Goal Progress

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
TIPS:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • Value is automatically clamped between min and max
  • Use current_zone state to show contextual messages
    e.g. when zone = high → show warning banner
  • Swap low/high colors for reverse gauges
  • Works great in repeating groups for multiple KPIs
  • Leave unit field completely empty for no unit suffix
  • Gauge Pro looks best on white or light backgrounds

Bubble editor link:
https://bubble.io/page?id=mbbuilds5&test_plugin=1788873236364x698591809508474900_current&tab=Design&name=gauge___speedometer&type=page&elements=bTGzB