Blazor Linear Gauge
A linear gauge shows a value on a straight scale, horizontal or vertical, with ticks, ranges, and a pointer - think of a thermometer or a level meter.
Basic Usage linkLink to this section
A horizontal linear gauge with configurable tick placement, pointer type, and value.
Ranges and Value Display linkLink to this section
Colored ranges highlight status zones. Use ShowValue and a <Template> to display a custom label next to the pointer.
Rounded Ranges linkLink to this section
Use BorderRadius on RadzenLinearGaugeScaleRange for pill-shaped bands.
Reversed Scale linkLink to this section
Set Reversed="true" to place Max on the left and Min on the right.
Draggable Pointer linkLink to this section
Set Draggable="true" with @bind-Value. Click anywhere on the scale or drag the pointer to update the value.
Vertical Orientation linkLink to this section
Set Orientation="Orientation.Vertical" for compact dashboard layouts. All pointer types and ranges are supported.
Multiple Scales linkLink to this section
Use LinePosition to stack independent scales inside the same gauge container.
Frequently asked questions
When should I use a linear gauge?
When a straight scale fits your layout better than a dial - a vertical level beside a stat, or a horizontal meter in a row - or when you want several scales side by side.
What can I configure?
The orientation, scale ranges and ticks, one or more pointers (including a draggable one), and a reversed scale.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT