<meter> - HTML-елемент для вимірювання

HTML-елемент <meter> представляє скалярне вимірювання в межах відомого діапазону або дробове значення. Цей елемент також відомий як вимірювач (gauge).

Елемент <meter> використовується для відображення таких речей, як використання дискового простору, релевантність результату пошукуабо або частка виборців, які обрали певного кандидата.

Браузери візуалізують <meter> як горизонтальний індикатор. Колір індикатора може змінюватися залежно від того, чи потрапляє поточне значення в "низький", "високий" чи "оптимальний" діапазон, визначений відповідними атрибутами.

Не використовуйте <meter> для позначення прогресу (наприклад, завантаження файлу або виконання задачі). Для цього існує елемент <progress>.

HTML
<meter min="0" max="100" value="75"></meter>

Атрибути

Цей тег може мати глобальні атрибути.

value: Поточне числове значення вимірювача. Повинно знаходитись в діапазоні між min та max. Якщо не вказано або має неправильний формат, значенням буде 0.
min: Нижня межа діапазону. Повинна бути меншою за max. Якщо не вказано, за замовчуванням дорівнює 0.
max: Верхня межа діапазону. Повинна бути більшою за min. Якщо не вказано, за замовчуванням дорівнює 1.
low: Верхня межа для "низького" діапазону. Значення має бути більшим за min і меншим за high та max.
high: Нижня межа для "високого" діапазону. Значення має бути меншим за max і більшим за low та min.
optimum: Вказує оптимальне числове значення. Використовується разом з low та high для визначення, чи є поточне значення "хорошим", "поганим" чи "середнім".

Технічне резюме

Категорія контенту	Потоковий контент, фразовий контент, відчутний контент.
Дозволений вміст	Фразовий контент, але без нащадків `<meter>`.
Пропуск тегів	Жоден, початковий та кінцевий теги є обов’язковими.
Дозволені батьківські елементи	Будь-який елемент, що приймає фразовий контент.
Роль ARIA	Немає відповідної ролі.
DOM інтерфейс	`HTMLMeterElement`

Приклади використання

<label for="fuel">Рівень пального:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="25">
  25/100
</meter>

<p>Використання сховища:</p>
<ul>
  <li>
    <b>Диск C:</b>
    <meter min="0" max="512" value="350">350GB з 512GB</meter>
  </li>
  <li>
    <b>Диск D:</b>
    <meter min="0" max="1024" value="900">900GB з 1024GB</meter>
  </li>
</ul>

Стилі за замовчуванням

CSS
meter {
  /* Стилі залежать від браузера */
  /* Приклад для Webkit (Chrome, Safari) */
  -webkit-appearance: meter;
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  width: 5em;
  vertical-align: -0.2em;
  border: 1px solid #A9A9A9;
}

Підтримка браузерів



`<meter>`
`high`
`low`
`max`
`min`
`optimum`
`value`