Атрибут low тега <meter>
Описание
Атрибут low для тега <meter> определяет пороговое значение, ниже которого текущий показатель считается низким. Это влияет на визуальное отображение индикатора (обычно меняется цвет).
<meter value="25" min="0" max="100" low="30" high="70">
Уровень заряда: 25% (низкий)
</meter>
Как работает атрибут low:
| Диапазон значений | Цвет индикатора | Состояние |
|---|---|---|
| value ≤ low | Красный (обычно) | Критически низкий |
| low < value < high | Желтый/Синий | Нормальный |
| value ≥ high | Зеленый (обычно) | Высокий |
Примеры с разными порогами:
<!-- Уровень воды в резервуаре -->
<meter value="15" min="0" max="50" low="10" high="40" optimum="25">
15 м³ (низкий уровень)
</meter>
<!-- Прогресс выполнения задачи -->
<meter value="20" min="0" max="100" low="30" high="80">
20% выполнения
</meter>
Стилизация состояний в CSS:
<style>
/* Базовые стили */
meter {
width: 300px;
height: 25px;
}
/* Оптимальное значение */
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="15" min="0" max="100" low="30" high="70"></meter>
Рекомендации по использованию:
- Всегда указывайте вместе с
highдля полной логики отображения - Значение должно быть между
minиmax - Используйте осмысленные пороги для вашего сценария
- Добавляйте текстовое описание для доступности
Динамический пример с JavaScript:
<meter id="batteryMeter" min="0" max="100" low="20" high="80"></meter>
<button onclick="updateBattery(15)">Низкий заряд</button>
<button onclick="updateBattery(50)">Средний заряд</button>
<script>
function updateBattery(level) {
const meter = document.getElementById('batteryMeter');
meter.value = level;
meter.textContent = `${level}% заряда` +
(level <= meter.low ? " (низкий)" : "");
}
</script>
Примечание: Визуальное отображение состояний может отличаться в разных браузерах. Для полного контроля над стилями рассмотрите создание кастомного индикатора с помощью CSS и JavaScript.