Gauge Blocks for Elementor

A gauge widget for Elementor that covers two genuinely different readings of the same number:

• Fill – progress toward a target. The bar grows from the origin. Use it when more is always better.
• Marker – position within a range. The scale is always complete and the value is a point along it. Use it when the ideal value sits mid-scale or at the low end: pH, risk level, temperature.

The color scale is defined by positionable stops, so one engine produces a solid color, a gradient, a heat map, or hard threshold bands.

Accessibility

• Ships a color-blind safe preset. Green and red are indistinguishable to roughly 8% of men, and the plugin flags this when you pick the traffic light preset.
• Color is never the only encoding: the marker and the numeric value always accompany it.
• Title and description are linked to the graphic through aria-labelledby, so a screen reader announces the whole block meaningfully.

Nothing else to install

Elementor is all you need. No ACF, no Chart.js, no external library. The graphic is server-rendered SVG: there is no frontend JavaScript and no layout shift on load.

Works with your theme

Color controls accept Elementor global colors, so gauges follow your site’s palette instead of drifting from it.

Developed and maintained by Santiago Cajiao — https://www.santiagocajiao.com