LinearGauge

The LinearGauge control 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 set the isReadOnly property to false and use it as an input control similar to the HTML input type="range".

You can also populate the ranges collection to define ranges of interest, shown in different colors.

This is a LinearGauge with default settings:

In this example, the isReadOnly property was set to false. This makes the gauge editable, similar to an HTML input element with type="range". Notice how the mouse pointer changes to indicate the gauge is editable:

This is a LinearGauge with a thinner pointer and ranges that indicate good, acceptable, and bad values:

This is a LinearGauge with a thinner pointer that changes color from green to yellow and then to red as the value grows.

In this example, the showRanges property was set to false. This makes the gauge use the ranges only to calculate the color of the pointer.

This is a LinearGauge that shows the current value as text: