Атрибут optimum тега <meter>
Описание
Атрибут optimum указывает оптимальное числовое значение для элемента <meter>. Вместе с атрибутами low и high он помогает визуально выделить оптимальный диапазон значений. Браузеры обычно отображают оптимальное значение зеленым цветом.
<meter
min="0"
max="100"
low="30"
high="80"
optimum="60"
value="65">
</meter>
<p>Уровень заряда батареи: 65/100 (оптимально 60)</p>
Как работает визуальное отображение:
| Диапазон значения | Цвет индикатора | Описание |
|---|---|---|
| Значение ≤ low | Красный | Слишком низкое значение |
| low < значение < high | Желтый | Приемлемое значение |
| Значение ≥ high | Зеленый | Высокое значение |
| Значение ≈ optimum | Ярко-зеленый | Оптимальное значение |
Динамическое изменение значения:
<meter
id="dynamic-meter"
min="0"
max="10"
low="3"
high="8"
optimum="7"
value="5">
</meter>
<button onclick="increaseValue()">+ Увеличить</button>
<button onclick="decreaseValue()">- Уменьшить</button>
<script>
function increaseValue() {
const meter = document.getElementById('dynamic-meter');
meter.value = Math.min(meter.max, meter.value + 1);
}
function decreaseValue() {
const meter = document.getElementById('dynamic-meter');
meter.value = Math.max(meter.min, meter.value - 1);
}
</script>
Советы по использованию:
- Используйте для визуализации рейтингов, уровня загрузки, прогресса
- Сочетайте с текстовым описанием для доступности
- Оптимальное значение не обязательно должно быть посередине диапазона
- Для сложных индикаторов рассмотрите использование CSS или SVG
Пример с CSS-стилизацией:
<style>
meter {
width: 300px;
height: 25px;
}
meter::-webkit-meter-optimum-value {
background: #4CAF50;
}
meter::-moz-meter-bar {
background: #4CAF50;
}
</style>
<meter
min="0"
max="100"
low="40"
high="90"
optimum="85"
value="88">
</meter>
Ограничения и совместимость:
- Поддерживается во всех современных браузерах
- Визуальное отображение может отличаться в разных браузерах
- Для кастомного дизайна может потребоваться JavaScript-решение
- Не подходит для интерактивного ввода данных (используйте
<input type="range">)
Примечание: Атрибут optimum особенно полезен для визуализации данных, где важно показать не просто текущее значение, но и его отношение к оптимальному диапазону. Например, для отображения уровня заряда батареи, загрузки системы или качества сигнала.