Números y deslizadores en HTML

El mismo valor, dos controles: uno donde escribes y otro que arrastras.

<label for="qty">Quantity</label>
<input type="number" id="qty" name="qty" min="1" max="99"
       step="1" value="1">

<label for="weight">Weight (kg)</label>
<input type="number" id="weight" name="weight" min="0" step="any">

<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100"
       step="5" value="40">

Cómo funciona

1. min, max y step acotan a los dos.
2. step="any" deja que un campo numérico acepte decimales de cualquier precisión.
3. Un range no muestra su valor, así que emparéjalo con <output>.

El intento, en números

Líneas

10

Caracteres a escribir

340

Tokens

99

Ritmo de tres estrellas

70 tpm

Al ritmo de tres estrellas de 70 tokens por minuto, este intento toma unos 85 segundos.

Escribe este fragmento

Paso 1 de 4 en Números, fechas y archivos; paso 15 de 25 en Formularios y entradas.

← Anterior Siguiente →