Indicate a single value, and ranges for reference values

LinearGauge displays a linear scale with an indicator that represents a single value and optional ranges to represent reference values. You can use the LinearGauge as a simple progress indicator or as an input control similar to the HTML input type="range". You can also populate the Ranges collection to define ranges of interest, which are shown in different colors.

Display Values

The LinearGauge control offers a ShowText property that determines which values the gauge should display as text.

Customize with Themes

The LinearGauge control's appearance is largely defined in CSS. Use the default theme, or customize the control's appearance with several professionally-designed themes that are included in all MVC controls.

Show Ranges

LinearGauge has a Ranges property that contains an collection of Range objects. By default, the ranges are displayed on the face of the gauge to indicate zones of interest, but you can use the ShowRanges property to hide the ranges. The gauge will determine which range contains the current gauge value and will apply that range's color to the gauge pointer.

Set Direction

Determine how the LinearGauge should be displayed using the Direction property. The property has four options: Up, Right, Down, & Left.