ESP32 Web Server with Slider: Control LED Brightness (PWM)

This tutorial shows how to build an ESP32 web server with a slider to control the LED brightness. You’ll learn how to add a slider to your web server projects, get its value and save it in a variable that the ESP32 can use. We’ll use that value to control the duty cycle of a
PWM signal
and change the brightness of an LED. Instead of an LED you can control a servo motor, for example.
Additionally, you can also modify the code in this tutorial to add slider to
your projects
to set a threshold value or any other value that you need to use in your code.
Project Overview
The ESP32 hosts a web server that displays a web page with a slider;
When you move the slider, you make an HTTP request to the ESP32 with the new slider value;
The HTTP request comes in the following format:
GET/slider?value=SLIDERVALUE
, in which
SLIDERVALUE
is a number between 0 and 255. You can modify your slider to include any other range;
From the HTTP request, the ESP32 gets the current value of the slider;
The ESP32 adjusts the PWM duty cycle accordingly to the slider value;
This can be useful to control the brightness of an LED (as we’ll do in this example), a servo motor, setting up a threshold value or other applications.
Prerequisites
Before proceeding with this project, make sure you check the following prerequisites.
Arduino IDE
We’ll program the ESP32 boards using Arduino IDE, so before proceeding with this tutorial, make sure you have the ESP32 board installed in your Arduino IDE.
Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)
Async Web Server Libraries
We’ll build the web server using the following libraries:
ESPAsyncWebServer
AsyncTCP
You can install these libraries in the Arduino Library Manager. Open the Library Manager by clicking on the Library icon at the left sidebar.
Search for
ESPAsyncWebServer
and install the
ESPAsyncWebServer by ESP32Async
Then, install the AsyncTCP library. Search for
AsyncTCP
and install the
AsyncTCP by ESP32Async
Code
The following code controls the brightness of the ESP32 built-in LED using a slider on a web server. In other words, you can change the PWM duty cycle with a slider. This can be useful to control the LED brightness or control a servo motor, for example.
Copy the code to your Arduino IDE. Insert your network credentials and the code will work straight away.
/*********

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
// Import required libraries
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const int output = 2;

String sliderValue = "0";

// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

const char* PARAM_INPUT = "value";

// Create AsyncWebServer object on port 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";

// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if (var == "SLIDERVALUE"){
return sliderValue;
}
return String();
}

void setup(){
// Serial port for debugging purposes
Serial.begin(115200);

// configure LED PWM functionalitites
ledcAttachChannel(output, freq, resolution, ledChannel);

ledcWrite(output, sliderValue.toInt());

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

// Print ESP Local IP Address
Serial.println(WiFi.localIP());

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html", index_html, processor);
});

// Send a GET request to <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");
});

// Start server
server.begin();
}

void loop() {

}
How the Code Works
Continue reading to learn how the code works or skip to the next section.
Importing libraries
First, import the required libraries. The
WiFi
ESPAsyncWebServer
and the
ESPAsyncTCP
are needed to build the web server.
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
Setting your network credentials
Insert your network credentials in the following variables, so that the ESP32 can connect to your local network.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
Variables definition
We’ll control the brightness of the ESP32 built-in LED. The built-in LED corresponds to
GPIO 2
. Save the GPIO we want to control on the
output
variable.
The
sliderValue
variable will hold the slider value. At start, it is set to zero.
String sliderValue = "0";
Set PWM Properties
The following lines define the PWM properties to control the LED.
// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;
We’ll use 8-bit resolution, which means you can control the LED brightness using a value from 0 to 255.
To learn more about PWM properties with the ESP32, read our guide:
ESP32 PWM with Arduino IDE (Analog Output)
Input Parameters
The
PARAM_INPUT
variable will be used to “search” for the slider value on the request received by the ESP32 when the slider is moved. (Remember: the ESP32 will receive a request like this
GET/slider?value=SLIDERVALUE
)
const char* PARAM_INPUT = "value";
It will search for
value
on the URL and get the value assigned to it.
Building the Web Page
Let’s now proceed to the web server page.
The web page for this project is pretty simple. It contains one heading, one paragraph and one input of type range.
Let’s see how the web page is created.
All the HTML te