Ejemplos de la etiqueta meter HTML5

Con los ejemplos de la etiqueta meter HTML5 podemos ver cómo represetar un rango de valores en formato barra.

Puedes encontrar esta demo documentada en el POST ORIGINAL "Etiqueta meter HTML5: Representar un valor mediante una barra".

Ejemplos con min, max y val

min=2, max= 20, value=4  valor 4
min=2, max= 20, value=10 valor 10
min=2, max= 20, value=10 valor 19

Ejemplos con min, max, val y optimum

min=10, max= 30, value=12, optimum=20 valor 12
min=10, max= 30, value=29, optimum=20 valor 29
min=10, max= 20, value=10, optimum=20 valor 20

Ejemplos con min, low, val ,optimum, high y max

Los valores que están dentro de los atributos high y low se mostrarán con barra amarilla.

min=10, low=15, high=25, max= 30, value=12, optimum=20 valor 12
min=10, low=15, high=25, max= 30, value=28, optimum=20 valor 28
min=10, low=15, high=25, max= 30, value=22, optimum=20 valor 22
min=10, low=15, high=25, max= 30, value=18, optimum=20 valor 18
min=10, low=15, high=25, max= 30, value=20, optimum=20 valor 20

Ejemplo para cambiar el ancho y alto del elemento

min=10, max= 30, value=17, optimum=20
valor 12
min=10, low=15, high=25, max= 30, value=28, optimum=20
valor 28
min=10, low=15, high=25, max= 30, value=22, optimum=20
valor 12