Gauge

A Gauge is a dial. It shows a value on a 270 degree scale with an arc or a needle.

Video tutorial: Gauge. All videos: Video tutorials.

<UIToolbox.Gauge max-value="200" value="60" format-string="0' km/h'" />
<UIToolbox.Gauge display-mode="Needle" min-value="-40" max-value="60" divisions="4" thickness="4" />

speed.Ranges = new[]
{
    new GaugeRange(140, 170, new Color(1f, .75f, .2f)),
    new GaugeRange(170, 200, new Color(.9f, .25f, .2f)),
};

Member	Description
`MinValue` (`min-value`), `MaxValue` (`max-value`)	The scale (0 to 100). A minimum above the maximum moves the maximum up, and the reverse.
`Value` (`value`)	The value, kept on the scale.
`DisplayMode` (`display-mode`)	`Arc` (default) fills from the start of the scale. `Needle` points at the value.
`Animate` (`animate`)	Eases the arc or needle to a new value in about 0.25 s (on). The value text always changes at once.
`Thickness` (`thickness`)	The width of the arc in pixels (8).
`Divisions` (`divisions`)	The steps between the major ticks (5). The scale has one more major tick than divisions. 0 hides the ticks.
`MinorTicks` (`minor-ticks`)	The minor ticks between two major ticks (4).
`ShowLabels` (`show-labels`)	Shows the value of each major tick (on).
`ShowValue` (`show-value`)	Shows the value below the center (on).
`FormatString` (`format-string`), `TickFormat` (`tick-format`)	The .NET formats of the value text and the tick labels ("0"). Quote literal text: `0' km/h'`.
`Ranges`	Colored bands on the rim, set in code. The arc or needle takes the color of the last range that holds the value.

The size comes from USS (120 px). The value uses color, the track --tb-gauge-track and the ticks --tb-gauge-tick. See Styling.
The gauge is a display. It has no input and no change event.

Styling

Class or property	Element
`tb-gauge`	The dial. Set its `width` and `height` for the size. `color` is the value color outside the ranges.
`--tb-gauge-track`	A custom property on the dial: the track color. A transparent color draws no track.
`--tb-gauge-tick`	A custom property on the dial: the tick color. A transparent color draws no ticks.
`tb-gauge__value`	The value text below the center.
`tb-gauge__tick-label`	A major tick label. The script sets `left` and `top`; keep `position: absolute` and `translate: -50% -50%`.
`tb-gauge--needle`	On the dial in needle mode.

#Gauge

#Styling

Gauge

Styling