El elemento meter HTML5

Ejemplos prácticos del uso de <meter> (caso real y usos comunes)

Ejemplo 1

Este ejemplo muestra algunos de los atributos presentados anteriormente: value, max y min.

Además de esto, usaremos un script para variar el valor del tag meter en un tiempo determinado y apreciar su comportamiento en el tiempo.

Value: 80

Para ver el código completo del experimento, has clic aquí.

Ejemplo 2

Este ejemplo muestra todos los atributos presentados anteriormente: value, max, min, low y high; además, todos ellos presentan uno de las pseudo clases ya definidas y explicadas en la sección de arriba.

Con ayuda del script anterior, veremos como:

• Cambiar el color del medidor:

      #meter2::-webkit-meter-bar {
          background:blue;
      }
  

  
  

  Value: 80

• Cambiar el color del medidor cuando el medidor esta en el rango low <= optimum <= high:

      #meter2::-webkit-meter-bar {
          background:blue;
      }    

  
  

  Value: 80

• Cambiar el color cuando esta de este rango; es decir; low <= optimum <= high:

      #meter2::-webkit-meter-bar {
          background:blue;
      }     

  
  

  Value: 80

Para ver el código completo del experimento, has clic aquí.

Ejemplo 3

También podemos aplicarle un gradiente, en vez de un color solido:

    #meter5 {
        width:60%;
        height:60px;
    }
    #meter5::-webkit-meter-bar {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #eee), color-stop(0.45, #eee), color-stop(0.55, #ccc));
        border-radius:5px;
    }
    #meter5::-webkit-meter-optimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
        border-radius:5px;
    }

    #meter5::-webkit-meter-suboptimum-value {
        background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
        border-radius:5px;
    }

Value: 80

Para ver el código completo del experimento, has clic aquí.

Ejemplo básico

<label>Nivel:</label>
<meter value="50" min="0" max="100"></meter>

Ejemplo simulando progreso de tareas (basado en mi experiencia)

Una vez tuve que mostrar cuánto llevaba un usuario completando una tarea. Aunque al principio usé <meter>, terminé cambiándolo por <progress>. Aquí te muestro cómo habría quedado con <meter> si el rango fuese conocido:

<label>Progreso de la tarea</label>
<meter id="m1" value="30" min="0" max="100"></meter>

Y para actualizarlo dinámicamente:

let m = document.getElementById("m1");
let v = 0;
setInterval(() => {
 if(v <= 100) {
   m.value = v;
   v++;
 }
}, 100);

Ejemplo con rangos y estados

<label>Nivel de temperatura</label>
<meter value="65" min="0" max="100" low="30" high="70" optimum="60"></meter>

Personalización y estilos: cómo cambiar el diseño del <meter>

Los navegadores basados en WebKit permiten personalizar con pseudoclases:

• ::-webkit-meter-bar
• ::-webkit-meter-optimum-value
• ::-webkit-meter-suboptimum-value

Yo mismo tuve que modificar estos estilos cuando quise que mi medidor combinara con la paleta de colores del proyecto.

Pseudoclases CSS específicas

meter::-webkit-meter-optimum-value {
 background: green;
}
meter::-webkit-meter-suboptimum-value {
 background: yellow;
}
meter::-webkit-meter-even-less-good-value {
 background: red;
}

Estilos avanzados con gradientes:

meter::-webkit-meter-bar {
 background: linear-gradient(to bottom, #fff, #ccc);
}

Accesibilidad del elemento <meter> en HTML5

Para que un <meter> sea accesible:

• Usa siempre label asociado
• Agrega texto alternativo si el significado no es obvio
• Considera usar aria-valuenow, aria-valuemin, aria-valuemax cuando personalices demasiado el estilo

Errores comunes y buenas prácticas al usar <meter>

• ❌ Error: Usarlo para progreso indefinido
  • (Justo lo que me pasó la primera vez.)
• ❌ Error: No definir min y max
  • Hace que el componente pierda semántica.
• ❌ Error: Valores fuera de rango
  • Algunos navegadores ignoran el medidor.
• ✔ Buena práctica: Mostrar contexto textual
  • Ejemplo: “65% (temperatura alta)”.

Preguntas frecuentes sobre el elemento <meter>

• ❓ ¿Puedo usar <meter> para progreso de tareas?
  • Solo si conoces el valor final. Si no, usa <progress>.
• ❓ ¿Puedo cambiar el color del <meter>?
  • Sí, pero solo con pseudoclases específicas en WebKit.
• ❓ ¿Qué pasa si no defino min o max?
  • Los valores por defecto serán 0 y 1.

Conclusión

El elemento <meter> es potente, semántico y muy útil cuando necesitas mostrar valores dentro de un rango. Entender sus atributos y estados visuales no solo mejora la accesibilidad, sino que te permite construir interfaces más claras. Y como comprobé cuando intenté mostrar progreso de una tarea, elegir correctamente entre <meter> y <progress> marca la diferencia entre una interfaz correcta y una engañosa.