Атрибут min тега <meter>
Описание
Атрибут min для тега <meter> определяет минимальное значение диапазона. Указывает нижнюю границу шкалы измерения.
<meter value="3" min="1" max="5">3 из 5</meter>
Особенности работы:
| Значение | По умолчанию | Допустимые значения |
|---|---|---|
min |
0 | Любое число меньше max |
Примеры разных диапазонов:
<!-- Шкала от 1 до 10 -->
<meter value="7" min="1" max="10">Оценка 7</meter>
<!-- Отрицательные значения -->
<meter value="-5" min="-10" max="10">-5</meter>
<!-- Дробные значения -->
<meter value="3.5" min="0" max="5" step="0.5">3.5</meter>
Рекомендации по использованию:
- Всегда указывайте
minвместе сmax - Для рейтингов используйте целые числа (1-5, 1-10)
- Избегайте одинаковых значений
minиmax - Сочетайте с
high/lowдля визуальных подсказок
Пример с динамическим изменением:
<meter id="tempMeter" value="20" min="-30" max="50">20°C</meter>
<button onclick="document.getElementById('tempMeter').value -= 5">-5°</button>
<button onclick="document.getElementById('tempMeter').value += 5">+5°</button>
Стилизация в разных браузерах:
<style>
meter {
width: 200px;
height: 20px;
}
/* Для Chrome/Safari */
meter::-webkit-meter-bar {
background: #f5f5f5;
border-radius: 3px;
}
/* Для Firefox */
meter::-moz-meter-bar {
background: linear-gradient(to right, #4CAF50, #FFC107, #F44336);
}
</style>
<meter value="25" min="0" max="100" low="30" high="80"></meter>
Примечание: Хотя min поддерживается всеми современными браузерами, внешний вид элемента <meter> может отличаться. Для сложных индикаторов рассмотрите использование SVG или CSS-анимаций.