Gauges are a visual way of displaying a range of values and a specific point within that range. Our gauge element lets you add & customize Apple’s native gauge.
Type
There are four different types of gauges: linear, linear with a dot, circular, and circular with a dot. Linear and linear with a dot gauges are straight lines, whereas circular and circular with a dot gauges are circles.
Linear and circular gauges display their current value using color to partially fill the gauge. Linear gauges with a dot and circular gauges with a dot display their current value with a dot on top of a completely filled gauge.
Style
Linear Gauge
Linear gauges have two styles: Default and Thin. Gauges with a default style are about three times thicker than gauges with a thin style.
Linear Gauge with a Dot
There are no style options for linear gauges with a dot.
Circular Gauge
Circular gauges also have two styles: Default and Symbol. Gauges with a default style show only the gauge, but they can display the gauge’s current value inside the gauge by flipping the Show Value property. Gauges with a symbol style can display an SF symbol inside the gauge.
Circular Gauge with a Dot
Circular gauges with a dot have three styles: Default, Symbol, and Range. Each of these styles can display the gauge’s current value inside the gauge.
Gauges with a default style don’t show anything under the gauge. Gauges with a symbol style can display an SF symbol under the gauge. Gauges with a range style display the minimum and maximum values under the gauge.
Show Value
Flipping on the Show Value attribute displays the Start Value within the gauge.
Gauge Values
There are three different values you can adjust: Start, Min, and Max.
Start Value tells your gauge which value to start with. This is the value that will initially be displayed with the Show Value property.
Min Value tells your slider what the minimum value of the range is.
Max Value tells your slider what the maximum value of the range is.
Fill
The Gauge Tint attribute lets you choose how many colors you want to be displayed in a linear gradient filling the gauge. You can have as many as five colors or as few as one.
The number of color attributes under the Gauge Tint attribute depends on how many colors you choose. Choose colors from the Color styles.
Dynamic Tint
Dynamic tint is a way to adjust the gauge’s color depending on its current value. If dynamic tint is active, the gauge color will always be solid.
For example, let’s say we have a gauge with values ranging from 0 to 5 that has three colors: blue, purple, and red.
When the gauge's value is 0 or 1, it will be blue;
When the gauge's value is 2 or 3, it will be purple;
When the gauge's value is 4 or 5, it will be red;
Dynamic Tint is available for all gauges, but it is the only option for circular gauges and linear gauges with a thin style.