¿Cómo crear un servidor web ESP32 con un control deslizante para regular el brillo de un LED?

Libro Guía del Microcontrolador ESP32
ESP32 / / 6 de octubre de 2026

Este tutorial te muestra cómo construir un servidor web con el ESP32 que incluya un slider para controlar la intensidad de un LED. Aprenderás cómo añadir un slider a tus proyectos de servidor web, obtener su valor y guardarlo en una variable que el ESP32 pueda usar. Usaremos ese valor para controlar el ciclo de trabajo (duty cycle) de una señal PWM y cambiar la intensidad de un LED. En lugar de un LED, también podrías controlar un servo motor, por ejemplo.

Además, puedes modificar el código de este tutorial para añadir sliders a tus proyectos y establecer un valor umbral o cualquier otro valor que necesites usar en tu código. Esto lo convierte en una plantilla extremadamente versátil que podrás adaptar a multitud de escenarios.

Resumen del proyecto

El funcionamiento del proyecto es el siguiente: el ESP32 aloja un servidor web que muestra una página web con un slider. Cuando mueves el slider, se hace una petición HTTP al ESP32 con el nuevo valor del slider. La petición HTTP llega con el siguiente formato: GET /slider?value=VALOR_SLIDER, donde VALOR_SLIDER es un número entre 0 y 255. Puedes modificar tu slider para incluir cualquier otro rango.

A partir de la petición HTTP, el ESP32 obtiene el valor actual del slider. El ESP32 ajusta el ciclo de trabajo del PWM en función del valor del slider. Esto puede ser útil para controlar la intensidad de un LED (como haremos en este ejemplo), un servo motor, establecer un valor umbral u otras aplicaciones.

Requisitos previos

Antes de proceder con este proyecto, asegúrate de revisar los siguientes requisitos previos.

Arduino IDE

Vamos a programar las placas ESP32 usando Arduino IDE, así que asegúrate de tener la placa ESP32 instalada en tu Arduino IDE.

Librerías del servidor web asíncrono

Construiremos el servidor web usando las siguientes librerías: la librería ESPAsyncWebServer y la librería AsyncTCP.

Puedes instalar estas librerías en el Gestor de Librerías de Arduino. Abre el Gestor de Librerías pulsando el icono de la biblioteca en la barra lateral izquierda. Busca ESPAsyncWebServer e instala la librería ESPAsyncWebServer de ESP32Async. Después, instala la librería AsyncTCP. Busca AsyncTCP e instala la librería AsyncTCP de ESP32Async.

Código completo del servidor web con slider

El siguiente código controla la intensidad del LED integrado en el ESP32 usando un slider en un servidor web. En otras palabras, puedes cambiar el ciclo de trabajo del PWM con un slider. Esto puede ser útil para controlar la intensidad de un LED o controlar un servo motor, por ejemplo.

Copia el código en tu Arduino IDE. Inserta tus credenciales de red y el código funcionará inmediatamente.

/*
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Detalles completos del proyecto en https://RandomNerdTutorials.com/esp32-web-server-slider-pwm/
*/
// Importa las librerías requeridas
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

// Reemplaza con las credenciales de tu red
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const int output = 2;

String sliderValue = "0";

// Configuración de las propiedades del PWM
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

const char* PARAM_INPUT = "value";

// Crea el objeto AsyncWebServer en el puerto 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP Web Server</title>
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
  </style>
</head>
<body>
  <h2>ESP Web Server</h2>
  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>
</body>
</html>
)rawliteral";

// Reemplaza el placeholder con la sección del botón en tu página web
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

void setup(){
  // Puerto serie para propósitos de depuración
  Serial.begin(115200);
  
  // Configura las funcionalidades PWM del LED
  ledcAttachChannel(output, freq, resolution, ledChannel);
  
  ledcWrite(output, sliderValue.toInt());

  // Conecta a Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Imprime la dirección IP local del ESP32
  Serial.println(WiFi.localIP());

  // Ruta para la raíz / página web
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", index_html, processor);
  });

  // Envía una petición GET a <ESP_IP>/slider?value=<inputMessage>
  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
    if (request->hasParam(PARAM_INPUT)) {
      inputMessage = request->getParam(PARAM_INPUT)->value();
      sliderValue = inputMessage;
      ledcWrite(output, sliderValue.toInt());
    }
    else {
      inputMessage = "No message sent";
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });
  
  // Inicia el servidor
  server.begin();
}
  
void loop() {
  
}

Cómo funciona el código paso a paso

Importar las librerías

Primero, se importan las librerías requeridas. Las librerías WiFi, ESPAsyncWebServer y AsyncTCP son necesarias para construir el servidor web.

Configurar las credenciales de red

Se insertan las credenciales de red en las variables correspondientes para que el ESP32 pueda conectarse a tu red local.

Definición de variables

Vamos a controlar la intensidad del LED integrado en el ESP32. El LED integrado corresponde al GPIO 2. Guardamos el GPIO que queremos controlar en la variable output.

La variable sliderValue almacenará el valor del slider. Al inicio, está establecida a cero:

String sliderValue = "0";

Configurar las propiedades del PWM

Las siguientes líneas definen las propiedades del PWM para controlar el LED:

const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

Usaremos una resolución de 8 bits, lo que significa que puedes controlar la intensidad del LED usando un valor de 0 a 255.

Parámetros de entrada

La variable PARAM_INPUT se usará para “buscar” el valor del slider en la petición recibida por el ESP32 cuando se mueve el slider. Recuerda: el ESP32 recibirá una petición como esta: GET /slider?value=VALOR_SLIDER:

const char* PARAM_INPUT = "value";

Buscará value en la URL y obtendrá el valor asignado a él.

Construir la página web

Ahora pasemos a la página del servidor web. La página web para este proyecto es bastante simple: contiene un encabezado, un párrafo y un input de tipo range.

Todo el texto HTML con los estilos incluidos se almacena en la variable index_html. Ahora revisaremos el texto HTML y veremos qué hace cada parte.

La siguiente etiqueta <meta> hace que tu página web sea responsive en cualquier navegador:

<meta name="viewport" content="width=device-width, initial-scale=1">

Entre las etiquetas <title> y </title> va el título de nuestro servidor web. El título es el texto que aparece en la pestaña del navegador web.

Estilos CSS

Entre las etiquetas <style> y </style> se añade algo de CSS para estilizar la página web. Básicamente, configuramos la página HTML para mostrar el texto con fuente Arial en bloque sin margen y alineado al centro. Las siguientes líneas establecen el tamaño de fuente para el encabezado (h2) y el párrafo (p). Después, se configuran las propiedades del cuerpo HTML. Finalmente, las siguientes líneas personalizan el slider: definen su apariencia, tamaño, color de fondo y el estilo del tirador (thumb) del slider.

Cuerpo HTML

Dentro de las etiquetas <body> y </body> es donde añadimos el contenido de la página web. Las etiquetas <h2> y </h2> añaden un encabezado a la página web. En este caso, el texto “ESP Web Server”, pero puedes añadir cualquier otro texto.

El primer párrafo contendrá el valor actual del slider. Esa etiqueta HTML particular tiene el id textSliderValue asignado, para que podamos referenciarlo más tarde:

<p><span id="textSliderValue">%SLIDERVALUE%</span></p>

El %SLIDERVALUE% es un placeholder para el valor del slider. Este será reemplazado por el ESP32 por un valor real cuando lo envíe al navegador. Esto es útil para mostrar el valor actual cuando accedes al navegador por primera vez.

Crear un slider

Para crear un slider en HTML se usa la etiqueta <input>. La etiqueta <input> especifica un campo donde el usuario puede introducir datos. Hay una amplia variedad de tipos de input. Para definir un slider, usa el atributo type con el valor range. En un slider, también necesitas definir el rango mínimo y máximo usando los atributos min y max (en este caso, 0 y 255, respectivamente):

<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>

También necesitas definir otros atributos como: el atributo step especifica el intervalo entre números válidos. En nuestro caso, está establecido a 1. La class para estilizar el slider (class="slider"). El id para actualizar la posición actual mostrada en la página web. El atributo onchange para llamar a una función (updateSliderPWM(this)) y enviar una petición HTTP al ESP32 cuando el slider se mueve. La palabra clave this se refiere al valor actual del slider.

Añadir JavaScript al archivo HTML

A continuación, necesitas añadir algo de código JavaScript a tu archivo HTML usando las etiquetas <script> y </script>. Necesitas añadir la función updateSliderPWM() que hará una petición al ESP32 con el valor actual del slider:

function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}

Esta siguiente línea obtiene el valor actual del slider por su id y lo guarda en la variable JavaScript sliderValue. Previamente, hemos asignado el id del slider a pwmSlider. Así que lo obtenemos de la siguiente forma:

var sliderValue = document.getElementById("pwmSlider").value;

Después, establecemos la etiqueta del slider (cuyo id es textSliderValue) al valor guardado en la variable sliderValue. Finalmente, hacemos una petición HTTP GET:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();

Por ejemplo, cuando el slider está a 0, haces una petición HTTP GET en la siguiente URL: http://ESP-IP-ADDRESS/slider?value=0. Y cuando el valor del slider es 200, tendrás una petición en la siguiente URL: http://ESP-IP-ADDRESS/slider?value=200. De esta forma, cuando el ESP32 recibe la petición GET, puede recuperar el parámetro value en la URL y controlar la señal PWM en consecuencia.

La función processor()

Ahora necesitamos crear la función processor(), que reemplazará los placeholders en nuestro texto HTML con el valor actual del slider cuando accedas a él por primera vez en un navegador:

String processor(const String& var){
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

Cuando se solicita la página web, comprobamos si el HTML tiene algún placeholder. Si encuentra el placeholder %SLIDERVALUE%, devolvemos el valor guardado en la variable sliderValue.

La función setup()

En el setup(), se inicializa el Monitor Serie para propósitos de depuración. Se configura el pin LEDC con las propiedades PWM definidas antes:

ledcAttachChannel(output, freq, resolution, ledChannel);

Se establece el ciclo de trabajo de la señal PWM al valor guardado en sliderValue (cuando el ESP32 arranca, está establecido a 0):

ledcWrite(output, sliderValue.toInt());

Después, se conecta a tu red local y se imprime la dirección IP del ESP32.

Manejar las peticiones

Finalmente, se añaden las siguientes líneas de código para manejar el servidor web. Cuando hacemos una petición en la URL raíz, enviamos el texto HTML que está almacenado en la variable index_html. También necesitamos pasar la función processor, que reemplazará todos los placeholders con los valores correctos:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

Necesitamos otro manejador que guardará el valor actual del slider y establecerá la intensidad del LED en consecuencia:

server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  if (request->hasParam(PARAM_INPUT)) {
    inputMessage = request->getParam(PARAM_INPUT)->value();
    sliderValue = inputMessage;
    ledcWrite(output, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

Básicamente, obtenemos el valor del slider en las siguientes líneas:

if (request->hasParam(PARAM_INPUT)) {
  inputMessage = request->getParam(PARAM_INPUT)->value();
  sliderValue = inputMessage;

Después, actualizamos la intensidad del LED (ciclo de trabajo del PWM) usando la función ledcWrite() que acepta como argumentos el pin LEDC que quieres controlar y el valor:

ledcWrite(output, sliderValue.toInt());

Por último, se inicia el servidor. Como es un servidor web asíncrono, no necesitamos escribir nada en el loop(). Esto es una de las grandes ventajas del servidor asíncrono: toda la lógica ocurre en callbacks que se ejecutan cuando llegan eventos, sin bloquear el flujo principal del programa.

Subir el código

Ahora, sube el código a tu ESP32. Asegúrate de tener la placa y el puerto COM correctos seleccionados.

Después de subir el código, abre el Monitor Serie a 115200 baudios. Pulsa el botón de reset del ESP32. La dirección IP del ESP32 debería imprimirse en el monitor serie.

Demostración del servidor web

Abre un navegador y escribe la dirección IP del ESP32. Tu servidor web debería mostrar el slider y su valor actual. Mueve el slider y observa cómo el LED integrado del ESP32 aumenta y disminuye su intensidad.

Conclusión: lo que has aprendido

Con este tutorial has aprendido cómo añadir un slider a tus proyectos de servidor web y obtener y guardar su valor en una variable que el ESP32 puede usar. Como ejemplo, estamos controlando una señal PWM para controlar la intensidad de un LED. En lugar de un LED, puedes controlar un servo motor, por ejemplo.

Además, el slider también puede usarse para establecer un umbral o cualquier otro valor que necesites configurar y que luego el ESP32 use para decidir sobre algo. Por ejemplo, podrías usar un slider para establecer la temperatura objetivo de un termostato, el ángulo de un servo, la velocidad de un motor o el nivel de brillo de una tira LED. El slider es una de las interfaces de usuario más intuitivas para controlar valores analógicos desde el navegador, y combinado con la potencia del servidor asíncrono del ESP32, te permite construir interfaces de control muy profesionales sin apenas código.

Esta técnica es la base de prácticamente cualquier panel de control domótico que quieras construir con el ESP32. Con un slider, un par de botones y un poco de CSS, puedes crear interfaces web completas para controlar cualquier dispositivo de tu casa, todo alojado en el propio ESP32 y accesible desde cualquier dispositivo con navegador en tu red local.

Vistas: 0

Descubre más desde CIBERED

Suscríbete y recibe las últimas entradas en tu correo electrónico.

Scroll al inicio