HTML <meter> Tag

The <meter> tag is used to display a scalar measurement within a known range. This control is also referred to as a slider or a gauge.

HTML Tag

Example

#

A <meter> element that indicates 50% complete.

Loading files...

50%
<div>Loading files... </div>

<br>
<meter value="0.5">50%</meter>

Using <meter>

The <meter> tag displays a scalar measurement within a known range or fractional value.

This element is also known as a slider or gauge.

It can be used to indicate disk usage, web traffic, temperature, and many more.

Note: If the browser does not support the meter tag, its content will be displayed.

More Examples

A <meter> element that specifies steam pressure.

Steam pressure...

35 psi
35 psi
<div>Steam pressure... </div>

<br />
<meter min="0" max="100" value="35">35 psi</meter>
<div>35 psi</div>

Attributes for <meter>

This table lists the <meter> tag attributes.

Attribute Value Description
value number Gauge current value between 0 and 1. This value is required.
min number Range minimum value
max number Range maximum value
id    identifier Defines a unique identifier for the meter.
class    classnames Sets one or more CSS classes to be applied to the meter.
style    CSS-styles Sets the style for the meter.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the meter is hidden.
title    text Sets a title that displays as a tooltip.
low number Low value range
high number High value range
optimum number Optimal value for the gauge
form form-id Form the meter element belongs to

For additional global attributes see our global attributes list.


Did you know?

Did you know?

Customizing the background of <meter>

By default, the <meter> background is green and gray.

With CSS the background color can be customized.

A <meter> control with customized background colors.

Loading files...

60%
<style>
  meter.meter-color::-webkit-meter-optimum-value { background: red; }
  meter.meter-color::-webkit-meter-bar { background: cornsilk; }
</style>

<div>Loading files...</div>

<br />
<meter class="meter-color" value="0.6">60%</meter>

Browser support

Here is when <meter> support started for each browser:

Chrome
8.0 Dec 2010
Firefox
6.0 Aug 2011
IE/Edge
13.0 Nov 2015
Opera
11.0 Dec 2010
Safari
6.0 Jul 2012

You may also like

Guides