meter value attribute
The value attribute on the meter element:
- allows you to specify the measured value (result of the scalar measurement) which will be represented on meter
- value is a specific attribute → can be applied ONLY on the next HTML5 elements: button, data, input, li, meter, option, param, progress
- is a required attribute
Colors representing the measured value on meter element:
the value will be represented in green if it's inside the optimal segment on the meter the value will be represented in yellow if it's inside the suboptimal segment the value will be represented in red if it's inside the less suboptimal segment
we call "value" the value of the value attribute, the result of the scalar measurement
note: the far the value is from the optimal segment, the less good it is → when you see red, it's bad!
See the explanatory video called "segments, values, colors, attributes" »video
Examples
| <meter | attribute | = | "value(s)" | > | ... | <⁄meter> | example |
|---|---|---|---|---|---|---|---|
| 6. | value | = | valid floating-point number | < min="3" value="6" max="9"> ... <⁄> |
Video demonstration meter value attribute
HTML5 meter value attribute Tutorial
| min | video details |
|---|---|
| 00:00 | video tutorial: value attribute on meter element |
| 00:05 | the value attribute allows you to specify the measured value = the result of the scalar measurement it is a required attribute! |
| 00:14 | Taking this example: 45 out of 60 ,br>'45' represents the result of the scalar measurement '60' represents the maximum value of the range |
| 00:26 | 45 represents the result of the scalar measurement, we will add it as value of the value attribute |
| 00:40 | the representation of the measured value is not correct since 45 out of 60 = 0.75, so 75% and not 100% as the meter displays in browser max attribute has been omitted; when so it's default value = 1 → 45 out of 1 instead of 45 out 60 To correct this we need to add the max value of 60 through max attribute |
| 00:48 | the representation of the measured value is now correct since 45 out of 60 = 0.75, 75% → 3 quarters of the meter have been colored in green |
| 00:55 | another way of doing it is to add straight the value of 0.75 (=45/60) to the value attribute and omit the max attribute whose default value is 1 → 0.75 out of 1 = 0.75 = 75% → a correct representation |