meter min, meter max attributes
The min, max attributes on the meter element:
- the min attribute allows you to specify the minimum value of the range
- the max attribute allows you to specify the maximum value of the range
min, max attributes
- their value must be a valid floating-point number
- min is a specific attributes → can be applied ONLY on the next HTML5 elements: input, meter
- max is a specific attributes → can be applied ONLY on the next HTML5 elements: input, meter, progress
- are optional attributes: when not specified, they have the next default values: min value="0" max value="1"
Examples
| <meter | attribute | = | "value(s)" | > | ... | <⁄meter> | example |
|---|---|---|---|---|---|---|---|
| 3. | max | = | 1, valid floating-point number | < value="2" max="9"> ... <⁄> | |||
| 4. | min | = | 0, valid floating-point number | < min="2" value="3" max="9"> ... <⁄> |
Video demonstration meter min, max attributes
HTML5 meter min, max attributes Tutorial
| min | video details |
|---|---|
| 00:02 | video tutorial: min and max attributes on meter, video tutorial |
| 00:06 | the min attribute allows you to specify the minimum value of the range |
| 00:10 | the max attribute allows you to specify the maximum value of the range |
| 00:15 | when min, max attributes are missing, their default values are: min="0" max="1" (the value 0.5 represents the midpoint between min and max values → half of the meter will display in green) |
| 00:30 | let's change the default values and see how the green segment varies based on the new min⁄max values (adding min, max attributes on meter tag) |
| 01:01 | the value of the value attribute goes between min and max values |
| 01:08 | if value = min → nothing to represent on meter |
| 01:14 | if value = max → represents the whole meter |