meter low, meter high attributes
The low, high attributes on the meter element:
- the low attribute allows you to specify the value of the range that marks the end of the 'low' segment of the range (the highest value considered "low", of the "low" segment)
- the high attribute allows you to specify the value of the range that marks the beginning of the 'high' segment of the range (the lowest value considered "high", of the "high" segment)
low, high attributes
- their value must be a valid floating-point number
- low is a specific attributes → can be applied ONLY on the next HTML5 element: meter
- high is a specific attributes → can be applied ONLY on the next HTML5 element: meter
- are optional attributes
Segments
The presence of the low and high attributes on meter start tag creates 2 more segments on the meter: apart the optimal zone, there's a suboptimal zone/segment and a less suboptimal zone/segment on the meter.
The suboptimal segment and the less suboptimal segment vary function of the optimal segment.
The high and low segments can be optimal, suboptimal or less suboptimal:
- the high segment is optimal if the optimum value is present inside it (between high and max),
- the high segment is suboptimal if the optimum value is present inside the middle segment (between low and high)
- the high segment is less suboptimal if the optimum value is present inside the low segment (between low and min)
- the low segment is optimal if the optimum value is present inside it (between low and min),
- the low segment is suboptimal if the optimum value is present inside the middle segment (between low and high)
- the low segment is less suboptimal if the optimum value is present inside the high segment (between high and max)
Colors ⁄ zones
- the corresponding color for the suboptimal region is: yellow;
if the result of the scalar measurement is inside the suboptimal zone than the color displayed on the meter indicating the result will be yellow - the corresponding color for the less suboptimal region is: red;
if the result of the scalar measurement is inside the less suboptimal zone than the color displayed on the meter indicating the result will be red
Examples
| <meter | attribute | = | "value(s)" | > | ... | <⁄meter> | example |
|---|---|---|---|---|---|---|---|
| 1. | high | = | valid floating-point number | < value="5" high="9" max="9"> ... <⁄> | |||
| 2. | low | = | valid floating-point number | < value="5" min="1" low="2" max="9"> ... <⁄> |
Video demonstration meter low, high attributes
HTML5 meter low, high attributes Tutorial
| min | video details |
|---|---|
| 00:06 | video tutorial: low and high attributes on meter, video tutorial |
| 00:12 | the value of the low attribute marks the end of the low segment the values between low - min form the low segment |
| 00:22 | the value of the high attribute marks the beginning of the high segment the values between high - max form the high segment |
| 00:31 | these 2 attributes (low, high) create 2 more zones ⁄segments: the 'suboptimal' zone and the 'even less suboptimal' zone |
| 00:38 | without them, we have only 1 zone, because the optimum value falls between min and max values making the whole meter optimal |
| 00:45 | thus we have 3 zones: 1 zone between min and low values 1 zone between low and high values 1 zone between high and max values |
| 01:00 | each zone can be: optimal, suboptimal or less suboptimal; examples next! |
| 01:07 | low zone = optimal zone IF optimum between min and low 4 is between [2..6] (green display) |
| 01:20 | low zone = suboptimal zone IF optimum between low and high 10 is between [6..15] (yellow display) |
| 01:26 | our value of 5 is now inside the suboptimal zone (the low zone became suboptimal) |
| 01:35 | low zone = even less suboptimal zone IF optimum between high and max 18 is between [15..20] (red display) |
| 01:38 | our value of 5 is now inside the even less suboptimal zone (the low zone became an even less suboptimal zone) |
| 01:43 | let's move our value within the high zone (value = 18, between high=15 and max=20 values) and play with the optimum value: see how the high zone can become optimal, suboptimal or less suboptimal |
| 01:55 | high zone = optimal zone IF optimum between high and max 18 is between [15..20] (green display) |
| 02:02 | high zone = suboptimal zone IF optimum between low and high 14 is between [6..15] (yellow display) |
| 02:08 | high zone = even less suboptimal zone IF optimum between min and low 4 is between [2..6] (red display) |