Construir un deslizador con input type=range

En esta lección crearás un control deslizante y mostrarás su valor en pantalla mientras se mueve.

<input type="range"> genera la barra deslizante; min, max y step definen el recorrido y el salto entre posiciones, y value el punto de partida. La etiqueta <output> está pensada precisamente para mostrar el resultado de una interacción.

En el código de ejemplo, el atributo oninput actualiza el texto cada vez que el valor cambia, así que el número acompaña al deslizador en tiempo real. Con step="10", el control avanza de diez en diez.

Aquí importa la diferencia entre dos eventos: oninput se dispara continuamente mientras arrastras, mientras que onchange espera a que sueltes. Si el valor solo se actualiza al soltar, es que estás usando el segundo.

Los deslizadores aparecen en controles de volumen, filtros de precio y ajustes de brillo. Como el valor exacto no siempre es evidente, mostrarlo al lado como en este ejemplo es casi obligatorio para que se pueda usar con comodidad.