La etiqueta <meter>
nos permite la creación de medidores que permitan mostrar el nivel o escala de un cierto valor. No deberían usarse estas etiquetas para mediro cosas de las que no conocemos el valor máximo. Existen multitud de medidas que se podrían representar con una etiqueta <meter>
:
Para ello, tenemos ciertos atributos disponibles en esta etiqueta <meter>
:
Atributo | Descripción |
---|---|
value |
Valor actual del medidor. |
min |
Valor mínimo que puede alcanzar el medidor. |
max |
Valor máximo que puede alcanzar el medidor. |
low |
(Opcional) Indica el umbral donde se considera bajo. |
high |
(Opcional) Indica el umbral donde se considera alto. |
optimum |
(Opcional) Indica el valor óptimo del medidor. |
Veamos cómo podemos utilizar estos atributos.
Veamos un ejemplo de este medidor con la etiqueta <meter>
, la cuál debe tener siempre un atributo value
donde puedes tener un valor entero o decimal (flotante):
<form method="post" action="/send/">
<meter value="0.5">
</form>
Por defecto, aunque no se indiquen, el atributo min
tendrá el valor 0.0
y el valor max
tendrá el valor 1.0
. En el ejemplo anterior, que hemos indicado el value
0.5
, debería mostrarse un medidor exactamente a la mitad. Si queremos cambiar estos valores, lo aconsejable sería definir los tres atributos:
<form method="post" action="/send/">
<meter min="0" value="25" max="100">
</form>
En este caso, el medidor se encuentra con un valor de 25
en la escala de 0
a 100
.
Recuerda que el valor
min
siempre tiene que ser inferior al valormax
. Además, el atributovalue
debe estar entre los valoresmin
ymax
.
La etiqueta
<meter>
no debería usarse para medir un progreso, ya que hay otra etiqueta<progress>
mucho más apropiada para esa finalidad.
low
y high
Además de los atributos mencionados anteriormente, hay otros atributos que podemos utilizar como low
o high
, con los que trazaremos tres segmentos:
low
low
y debajo de high
high
Observa el siguiente ejemplo, donde hemos añadido un umbral bajo low
a 25
y un umbral alto high
a 75
. Si observas el medidor resultante, observarás que si el atributo value
está por debajo de 25
o por encima de 75
aparecerá en amarillo, en caso contrario, si está entre 25
y 75
, aparecerá en verde:
<form method="post" action="/send/">
<meter min="0" max="100" value="75"
low="25" high="75">
</form>
En este otro ejemplo, subimos el valor de low
a 50
y el valor de high
a 90
. Ahora los valores en amarillo son aquellos por debajo de 50
y por encima de 90
, mientras que los valores del tramo intermedio aparecen en verde:
<form method="post" action="/send/">
<meter min="0" max="100" value="91"
low="50" high="90">
</form>
Recuerda que el valor
low
siempre será menor que el valorhigh
. Además, ambos valores deben estar siempre entremin
ymax
.
optimum
Además de todo lo anterior, podemos utilizar el atributo optimum
para definir cuál es nuestro umbral óptimo. Piensa que nuestro medidor puede representar un medidor de seguridad de contraseña, donde los valores más altos son los deseados, pero también podemos tener un medidor de estrés de un personaje de videojuego, donde los valores más bajos son los deseables.
Para configurar estos detalles, usaremos el atributo optimum
. Veamos un ejemplo:
<form method="post" action="/send/">
<meter min="0" max="100" value="75"
low="25" high="75" optimum="100">
</form>
En este caso, ocurrirá lo siguiente:
75
y 100
se considera tramo deseable, aparecerá en verde.25
y 75
se considera tramo medio, aparecerá en amarillo.0
y 25
se considera tramo bajo, aparecerá en rojo.Dependiendo de los valores establecidos, los colores del medidor cambiarán. A continuación tenemos un esquema de colores que nos muestra las combinaciones posibles:
Low < Optimum < High | Low < High < Optimum | Optimum < Low < High |
---|---|---|
Por aquí tienes información de la versión en la que estas características se han empezado a soportar en navegadores:
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev