Curso HTML 9.5 Rango, color y otros controles (range, color, file)

Controles de tipo “range”

El control <input type='range'> ofrece un deslizador (slider) para seleccionar valores numéricos dentro de un rango. Podemos configurarlo con atributos como min, max, step, value y conectarlo a un elemento <output> o a un evento input para mostrar el valor en tiempo real.

• min: valor mínimo permitido.
• max: valor máximo permitido.
• step: incremento en cada paso.
• value: valor inicial cargado.
• list: referencia a un <datalist> para marcar posiciones.
• Eventos: input (mientras se arrastra), change (cuando se suelta).

Ejemplo: slider de brillo con indicador de valor y marcas en el datalist.

Brillo:


100

Detalles profundos de type='range'

• En navegadores modernos, se puede rotar verticalmente usando CSS (transform: rotate()), aunque aquí no mostramos CSS detallado.
• El atributo list no genera etiquetas visibles, solo marcas en el track.
• Podemos usar step='any' para permitir cualquier valor flotante.
• El valor leído en JavaScript siempre será una cadena; conviene convertirlo con Number() si se van a hacer cálculos.

Controles de tipo “color”

El control <input type='color'> abre un selector de color nativo que devuelve un valor hexadecimal #RRGGBB. Soporta atributos:

• value: color inicial (hexadecimal).
• Eventos: input y change para detectar cambios en tiempo real o al cerrar el selector.
• list: puede referenciar a un <datalist> con paletas predefinidas (no es estándar en todos los navegadores).

Ejemplo: selector de color con muestra dinámica.

Elige un color:

Detalles profundos de type='color'

• El valor siempre es una cadena de 7 caracteres: # + 6 dígitos hex.
• Algunos navegadores permiten paletas de colores personalizadas vinculadas a un datalist.
• Si el usuario cancela el diálogo, el valor no cambia y no se dispara change.
• Es ideal para aplicaciones de edición de gráficos o selección de temas CSS dinámicos.

Controles de tipo “file”

El control <input type='file'> permite al usuario subir archivos desde su sistema local. Aporta:

• multiple: habilita selección de varios archivos.
• accept: lista de tipos MIME o extensiones permitidas (image/*, .pdf, etc.).
• capture: en móviles, invita a usar la cámara o micrófono (capture='environment').
• Propiedad files en JavaScript, que es un FileList.
• Podemos leer el contenido con FileReader o subirlo con FormData.

Ejemplo: selección previa de imágenes y vista previa de miniaturas.

Selecciona imágenes:

Detalles profundos de type='file'

• La propiedad input.files devuelve un FileList similar a un array, con objetos File.
• Con FileReader podemos leer:
  • readAsDataURL(): para imagenes (base64).
  • readAsText(): para texto plano.
  • readAsArrayBuffer(): para datos binarios.
• Para subir al servidor, se suele usar:

  const formData = new FormData();
  for (const file of inputFiles.files) {
    formData.append('archivos[]', file);
  }
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(resp => { /* manejar respuesta */ });
      

• El atributo capture puede tomar valores:
  • user (cámara frontal).
  • environment (cámara trasera).

Resumen comparativo