Spectre Meters

Spectre Meters represent the value within the known range. Meter is an important component of development, by using the meter class in Spectre we can create a meter field. We can indicate the meter status by its color which can be defined by using the attributes.

Spectre Meters Class:

• meter: This class is used to create the Meter field.

Spectre Meters Attributes:

• value: This attribute holds the meter value.
• optimum: This attribute holds the possible outcome. 
• min: This attribute holds the minimum value of the meter box.
• max: This attribute holds the maximum value of the meter box.
• low: This attribute holds the lower value, which indicates the status of the meter.
• high: This attribute holds a high value, which indicates the status of the meter.

Syntax:

<meter class="meter" 
       value="20" 
       optimum="85" 
       min="0" 
       max="100" 
       low="25" 
       high="75">
</meter>

Example 1: This example describes the basic usage of the Spectre Meters. Here, we will create a 4 meter, two of them will show green color, one will be yellow and another one will be red.

Output:

Example 2: In this example, we will create 3 meters that will indicate 3 colors based on the attribute values set.

Output:

Supported Browsers:

• Firefox 106 & above
• Chrome 107 & above
• Microsoft Edge 107
• Safari 16.1
• Opera 16

Reference: https://picturepan2.github.io/spectre/experimentals/meters.html