Slider range HTML: min, max, step, valor en vivo y restablecimiento

HTML input type="range" selecciona un número dentro de un rango definido usando un deslizador. Configura sus límites e intervalos con min, max y step, y su valor inicial con value. Es adecuado para ajustes relativos como volumen o brillo; usa un elemento de salida separado y JavaScript para mostrar el número actual.

Comprende el rango y los valores predeterminados

Una entrada de rango no tiene valor vacío. Omitir el valor no significa "no seleccionado aún", y required no se aplica. Si importa si se hizo una elección explícita en una encuesta, considere opciones explícitas u otro método de entrada.

Los pasos se calculan a partir de una base. Por ejemplo, min="16" max="32" step="2" permite 16, 18, 20, hasta 32. Los navegadores pueden normalizar un valor inicial fuera del rango o del paso, por lo que verifique que el valor actual coincida con el valor predeterminado deseado.

Ejemplo completo: cambiar el tamaño de la fuente en vivo

Guarda este código como range.html y ábrelo en un navegador. No se necesita servidor ni biblioteca. El deslizador cambia el tamaño de fuente de una oración de ejemplo de 16 a 32 px en pasos de 2 px, y al enviar se muestran los datos reales del formulario en lugar de enviarlos.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ajustar el tamaño con range</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Ajustar el tamaño del texto</h1>
  <form id="demo">
    <label for="fontSize">Tamaño de ejemplo (16–32 px, pasos de 2 px)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>Tamaño actual: <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">Mostrar valores enviados</button>
      <button type="reset">Restablecer</button></p>
  </form>
  <p id="preview">Mover el deslizador cambia el tamaño de esta frase.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

1. Inicialmente, el tamaño mostrado es de 20 px y la vista previa usa ese tamaño. Envía para ver la cadena "20" bajo el nombre fontSize.
2. Mueve el deslizador con un puntero y verifica que el número y el tamaño de fuente se actualicen juntos. Usa Tab para llegar a él y prueba también las teclas de flecha.
3. Por ejemplo, un paso de la flecha derecha cambia de 20 a 22: la visualización se convierte en 22 y el tamaño de fuente en 22 px. Ahora, al enviar se muestra "22".
4. Restablecer devuelve el control deslizante, el número y el tamaño de vista previa a 20. El controlador de restablecimiento programa la actualización para el marco siguiente para que lea el valor después de que el restablecimiento nativo haya tenido efecto.

El ejemplo usa input para actualizar inmediatamente durante el ajuste. Para procesar un ajuste confirmado, considera change. Los eventos difieren en momento y propósito; elige según necesites una vista previa en vivo.

Distinguir valores actuales, enviados e iniciales

slider.value es el número actual como cadena; slider.valueAsNumber es numérico. El atributo value del HTML es el valor inicial: mover el control deslizante no cambia también esa cadena de atributo. Lee el valor actual del elemento para mostrarlo o guardarlo.

output muestra un resultado calculado o seleccionado; no reemplaza un campo de formulario enviado. El ejemplo envía la entrada del rango nombrado. El almacenamiento real en el servidor necesita una ruta existente y manejo de solicitudes, así como validación del rango y paso del lado del servidor.

Elija entre rango y número y verifique la visualización

Si los usuarios necesitan ingresar una cantidad, monto o longitud precisa, considere ajustes de rango y paso de entrada numérica. Los deslizadores ajustan rápidamente un nivel aproximado, pero seleccionar un número exacto puede ser difícil en pantallas estrechas. Cuando se necesita precisión, un campo numérico sincronizado puede acompañar al deslizador.

accent-color puede cambiar el color de acento del control deslizante nativo. No necesariamente colorea todas las partes de manera idéntica, y la apariencia varía según el navegador y el sistema operativo. Verifique el ancho en dispositivos móviles, un espacio adecuado para la interacción, la asociación de etiquetas, el enfoque del teclado y la visualización numérica en conjunto.

La referencia de range en MDN explica los valores predeterminados y los atributos admitidos.