7

Buen día Tengo dudas acerca del uso de la etiqueta meter de html5 ya que la estoy empleando en un proyecto pero no me da los resultados esperados, tal vez la este implementando mal... pongo el siguiente ejemplo

<meter value="6" low="3" max="6">2 out of 10</meter><br>
<meter value="6" low="4" max="6">2 out of 10</meter><br>

mi duda es por que al ejecutar el código una barra es de color verde y la otra es amarilla si en los dos casos el valor del "value" no esta dentro del rango del atributo "min" que se configura por defecto en 0, y el "low" que en los dos casos es menor al value?

3 respuestas 3

6

<meter value="6" low="2" max="6">2 out of 10</meter><br>
<meter value="6" low="3" max="6">2 out of 10</meter><br>

<br>
<br>

Es un error de jerarquía, toma la siguiente guía
debes hacerlo asi

<!-- min <= low <= value <= high <= max -->

<br><br>


<meter  min="1" low ="1" value ="1" high ="6" max="6"        >2 out of 10</meter><br>
<meter  min="1" low ="1" value ="2" high ="6" max="6"        >2 out of 10</meter><br>
<meter  min="1" low ="1" value ="3" high ="6" max="6"        >2 out of 10</meter><br>
<meter  min="1" low ="1" value ="4" high ="6" max="6"        >2 out of 10</meter><br>
<meter  min="1" low ="1" value ="5" high ="6" max="6"        >2 out of 10</meter><br>
<meter  min="1" low ="1" value ="6" high ="6" max="6"        >2 out of 10</meter><br>

sin salir de los valores minimos o maximos

2
3

Lo que pasa es que si no especificás el valor óptimo (con el atributo optimum), éste se se fija exactamente a mitad de camino entre min y max (o sea 3).

Ahora, si el valor óptimo está entre low y high (primer caso), entonces si el valor está también entre low y high, la barra se pinta de verde. Y si está fuera de ese rango, de amarillo.

Pero si el valor óptimo es menor a low (segundo caso), entonces si el valor está entre 0 y low, la barra se pone verde, si está entre low y high se pone amarilla (lo que pasa en ese caso), y si es mayor a high se pone roja.

Lo mismo ocurre cuando el valor óptimo es mayor a high (pero para el otro lado, por supuesto).

3

esto se da porque <meter><meter> fue dise;ado para las estadistica de uso:
como medida de consumo de CPU,memoria,spacio etc...

introducir la descripción de la imagen aquí

en la imagen podemos ver como lo optimo esta al medio ya que optimum esta en 50 que es la mitada ni muy bajo ni muy alto
en tu caso el low="4" de un rango max="6" y un value="6" asi que toma como zona baja o no optima de 4 en adelante y omite el high="" dejando solo 2 zonas baja y optima como 0 a 3 porque por defecto min="0"

<meter value="1" low="4" max="6">2 out of 10</meter><br>
<meter value="3" low="4" max="6">2 out of 10</meter><br>
<meter value="6" low="4" max="6">2 out of 10</meter><br>

ahora bien tambien podemos especificarle rango altos, bajos y optimos

introducir la descripción de la imagen aquí

<p>28% <meter min="0" max="100" low="34" high="70"  optimum="90" value="28"></meter> VENTAS<br>
40% <meter min="0" max="100" low="34" high="70"  optimum="90" value="40"></meter> PRUEBAS<br>
80% <meter min="0" max="100" low="34" high="70"  optimum="90" value="80"></meter> CODIGO<br></p> 

  1. donde min es el valor minimo y max es el valor maximo para nuestra barra
  2. optimum es para elegir nuestra zona segura reprensentada de color verde.
  3. low y high es para especificar los rangos posible.
  4. todo por debajo de low o arriba de high se considerara como zona demaciado baja o alta dependiendo del valor de optimun entre mas lejos mas peligro.

ahora podemos hacer un ejemplo del consumo de nuestro equipo invirtiendo el valor optimun:

<p>28% <meter min="0" max="100" low="50" high="80"  optimum="0" value="28"></meter> DISCO<br>
60% <meter min="0" max="100" low="50" high="80"  optimum="0" value="60"></meter> MEMORIA<br>
90% <meter min="0" max="100" low="50" high="80"  optimum="0" value="90"></meter> CPU<br><p>

referencia:
HTML5 Meter

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.