Usando input range

16-04-2015

HTML5 incluye nuevos tipos de datos para la etiqueta input para que el navegador sepa que tipo de información estamos pidiendo y pueda crear un elemento apropiado. El tipo “rango” (range) se usaría cuando queremos que el usuario nos proporcione un número que esté comprendido entre un máximo y un mínimo, por ejemplo el número de recámaras en una casa o el número de patas en un perro (el pobre perro pudo haber sufrido un accidente).

<input type="range" min="0" max="10" list="marcas" step="2" />

En este ejemplo le estamos diciendo al navegador que haga un rango entre el 0 y el 10, con los valores a elegir saltando de 2 en 2 (step). Si no ponemos un step, entonces los valores saltarán de 1 en 1, se pueden poner decimales. List es un atributo opcional que nos dice donde estarán las marcas y su valor es el id de una lista de datos:

<datalist id="marcas">
<option value="2" />
<option value="4" />
<option value="6" />
<option value="8" />
</datalist>

Firefox no pone ninguna marca, por lo menos hasta la versión 37 todavía no pone nada.

Uno de los problemas es que la especificación del w3c no hace obligatorio decirle al usuario que valor está eligiendo, lo cual está bien para cuando un valor aproximado está bien, pero no para cuando necesitamos algo exacto. Solo Internet Explorer le dice al usuario que está eligiendo.

Para darle al usuario una idea de lo que está haciendo necesitaremos usar un poco de javascript:

function actualizar() {
        rango = document.getElementsByName('numero')[0];
        valor = rango.value;
        campo = document.getElementById('numero-value');
        campo.innerHTML = valor;
    }

Puedes ver el ejemplo completo en codepen.

Roberto Baca

Escribo cosas de vez en cuando