Атрибут value тега <meter>
Описание
Атрибут value для тега <meter> указывает текущее числовое значение в заданном диапазоне. Это обязательный атрибут, определяющий положение индикатора.
<meter value="65" min="0" max="100">65%</meter>
Атрибуты для настройки:
| Атрибут | Описание | Пример |
|---|---|---|
value |
Текущее значение (обязательный) | value="65" |
min |
Минимальное значение (по умолчанию 0) | min="0" |
max |
Максимальное значение (по умолчанию 1) | max="100" |
low |
Граница низкого значения | low="30" |
high |
Граница высокого значения | high="80" |
optimum |
Оптимальное значение | optimum="75" |
Пример с полной настройкой:
<meter
value="65"
min="0"
max="100"
low="30"
high="80"
optimum="75">
65 из 100
</meter>
Стилизация через CSS:
<style>
meter {
width: 300px;
height: 25px;
}
meter::-webkit-meter-bar {
background: #eee;
border-radius: 5px;
}
meter::-webkit-meter-optimum-value {
background: #4CAF50;
}
meter::-webkit-meter-suboptimum-value {
background: #FFC107;
}
meter::-webkit-meter-even-less-good-value {
background: #F44336;
}
</style>
<meter value="40" min="0" max="100" low="30" high="80"></meter>
Рекомендации по использованию:
- Всегда указывайте
value,minиmax - Используйте текстовое содержимое как fallback
- Сочетайте с
labelдля доступности - Проверяйте отображение в разных браузерах
Примечание: Тег <meter> подходит для отображения статических измерений (использование диска, результаты тестов). Для интерактивных элементов используйте <progress> или <input type="range">.