ESP8266 NodeMCU Web Server with Slider: Control LED Brightness (PWM)

This tutorial shows how to build an ESP8266 NodeMCU 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 ESP8266 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 a slider to your projects to set a threshold value or any other value that you need to use in your code.

Project Overview

ESP8266 NodeMCU Slider Web Server Control LED Brightness

The ESP8266 hosts a web server that displays a web page with a slider;
When you move the slider, you make an HTTP request to the ESP8266 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 1023. You can modify your slider to include any other range;
From the HTTP request, the ESP8266 gets the current value of the slider;
The ESP8266 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 ESP8266 NodeMCU board using Arduino IDE, so before proceeding with this tutorial, make sure you have the ESP8266 board installed in your Arduino IDE.

Installing ESP8266 NodeMCU Board in Arduino IDE (Windows, Mac OS X, and Linux)

Async Web Server Libraries

We’ll build the web server using the following libraries:

These libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation Libraries folder. Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the libraries you’ve just downloaded.

Code

The following code controls the brightness of the ESP8266 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 way.

/*********
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com/esp8266-nodemcu-web-server-slider-pwm/
  
  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 <ESP8266WiFi.h>
#include <ESPAsyncTCP.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";

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="1023" 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);

  analogWrite(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_P(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;
      analogWrite(output, sliderValue.toInt());
    }
    else {
      inputMessage = "No message sent";
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });
  
  // Start server
  server.begin();
}
  
void loop() {
  
}

View raw code

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 ESP8266WiFi, ESPAsyncWebServer and the ESPAsyncTCP are needed to build the web server.

#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>

Setting your network credentials

Insert your network credentials in the following variables, so that the ESP8266 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 ESP8266 built-in LED. The built-in LED corresponds to GPIO 2. Save the GPIO we want to control on the output variable.

const int output = 2;

The sliderValue variable will hold the slider value. At start, it is set to zero.

String sliderValue = "0";

Input Parameters

The PARAM_INPUT variable will be used to “search” for the slider value on the request received by the ESP8266 when the slider is moved. (Remember: the ESP8266 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.

ESP8266 NodeMCU Slider Web Server How it Works

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 text with styles included is stored in the index_html variable. Now we’ll go through the HTML text and see what each part does.

The following <meta> tag makes your web page responsive in any browser.

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

Between the <title> </title> tags goes the title of our web server. The title is the text that shows up on the web browser tab.

Styles

Between the <style></style> tags, we add some CSS to style the web page.

<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>

Basically, we’re setting the HTML page to display the text with Arial font in block without margin, and aligned at the center.

html {font-family: Arial; display: inline-block; text-align: center;}

The following lines set the font size for the heading (h2) and paragraph (p).

h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}

Set the HTML body properties.

body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}

The following lines customize the slider:

.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; }

HTML Body

Inside the <body></body> tags is where we add the web page content.

The <h2></h2> tags add a heading to the web page. In this case, the “ESP Web Server” text, but you can add any other text.

<h2>ESP Web Server</h2>

The first paragraph will contain the current slider value. That particular HTML tag has the id textSliderValue assign to it, so that we can reference it later.

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

The %SLIDERVALUE% is a placeholder for the slider value. This will be replaced by the ESP8266 by an actual value when it sends it to the browser. This is useful to show the current value when you access the browser for the first time.

Creating a Slider

To create a slider in HTML you use the <input> tag. The <input> tag specifies a field where the user can enter data.

There are a wide variety of input types. To define a slider, use the “type” attribute with the “range” value. In a slider, you also need to define the minimum and the maximum range using the “min” and “max” attributes (in this case, 0 and 1023, respectively).

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

You also need to define other attributes like:

the step attribute specifies the interval between valid numbers. In our case, it is set to 1;
the class to style the slider (class=”slider”);
the id to update the current position displayed on the web page;
the onchange attribute to call a function (updateSliderPWM(this)) to send an HTTP request to the ESP8266 when the slider moves. The this keyword refers to the current value of the slider.

Adding JavaScript to the HTML File

Next, you need to add some JavaScript code to your HTML file using the <script> and </script> tags. You need to add the updateSliderPWM() function that will make a request to the ESP8266 with the current slider value.

<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>

This next line gets the current slider value by its id and saves it in the sliderValue JavaScript variable. Previously, we’ve assigned the id of the slider to pwmSlider. So, we get it as follows:

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

After that, we set the slider label (whose id is textSliderValue) to the value saved on the sliderValue variable.

Finally, make an HTTP GET request.

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

For example, when the slider is at 0, you make an HTTP GET request on the following URL:

http://ESP-IP-ADDRESS/slider?value=0

And when the slider value is 200, you’ll have a request on the follow URL.

http://ESP-IP-ADDRESS/slider?value=200

This way, when the ESP8266 receives the GET request, it can retrieve the value parameter in the URL and control the PWM signal accordingly as we’ll se in the next sections

Processor

Now, we need to create the processor() function, that will replace the placeholders in our HTML text with the current slider value when you access it for the first time in a browser.

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

When the web page is requested, we check if the HTML has any placeholders. If it finds the %SLIDERVALUE% placeholder, we return the value saved on the sliderValue variable.

setup()

In the setup(), initialize the Serial Monitor for debugging purposes.

Serial.begin(115200);

Set the duty cycle of the PWM signal to the value saved on the sliderValue (when the ESP8266 starts, it is set to 0).

analogWrite(output, sliderValue.toInt());

To learn more about PWM with the ESP8266, read our guide: ESP8266 PWM with Arduino IDE (Analog Output).

Connect to your local network and print the ESP8266 IP address.

// 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());

Handle Requests

Finally, add the next lines of code to handle the web server.

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(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(ledChannel, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

When we make a request on the root URL, we send the HTML text that is stored on the index_html variable. We also need to pass the processor() function, that will replace all the placeholders with the right values.

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

We need another handler that will save the current slider value and set he LED brightness accordingly.

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(ledChannel, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

Basically, we get the slider value on the following lines:

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

Then, update the LED brightness (PWM duty cycle) using the ledcWrite() function that accepts as arguments the channel you want to control and the value.

ledcWrite(ledChannel, sliderValue.toInt());

Lastly, start the server.

server.begin();

Because this is an asynchronous web server, we don’t need to write anything in the loop().

void loop(){

}

That’s pretty much how the code works.

Upload the Code

Now, upload the code to your ESP8266. Make sure you have the right board and COM port selected.

After uploading, open the Serial Monitor at a baud rate of 115200. Press the ESP8266 reset button. The ESP8266 IP address should be printed in the serial monitor.

ESP32 ESP8266 PWM Web Server Arduino IDE Serial Monitor IP Address

Web Server Demonstration

Open a browser and type the ESP8266 IP address. Your web server should display the slider and its current value.

Move the slider and see the ESP8266 built-in LED increasing and decreasing its brightness.

Wrapping Up

With this tutorial you’ve learned how to add a slider to your web server projects and get and save its value on a variable that the ESP8266 can use. As an example, we’re controlling a PWM signal to control the brightness of an LED. Instead of an LED, you can control a servo motor, for example.

Additionally, the slider may also be used to set up a threshold or any other value that you need to be set up and then be used by the ESP8266 to decide on something.

If you’re using an ESP32 board, read ESP32 Web Server with Slider Control LED Brightness (PWM).

We hope you’ve found this project useful. You may also like the following tutorials:

Learn more about the ESP8266 with our resources:

Thanks for reading.

SMART HOME with Raspberry Pi, ESP32, ESP8266 [eBook]

Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »

Recommended Resources

Build a Home Automation System from Scratch » With Raspberry Pi, ESP8266, Arduino, and Node-RED.

Home Automation using ESP8266 eBook and video course » Build IoT and home automation projects.

Arduino Step-by-Step Projects » Build 25 Arduino projects with our course, even with no prior experience!

What to Read Next…

ESP8266 NodeMCU with RCWL-0516 Microwave Radar Proximity Sensor Arduino IDE

Enjoyed this project? Stay updated by subscribing our newsletter!

30 thoughts on “ESP8266 NodeMCU Web Server with Slider: Control LED Brightness (PWM)”

Nicola

August 25, 2020 at 4:49 pm

how do i find the ip address?
Reply
- Rui Santos
  
  August 26, 2020 at 1:13 pm
  
  The IP Address is printed in the Arduino IDE Serial Monitor (use baud rate 115200) when you restart your ESP board. Make sure you add your SSID and Password to the code before uploading it.
  Reply
  - George S Lavra
    
    August 26, 2020 at 6:15 pm
    
    Great tutorial, very detailed.
    My old mind has one problem that prevents doing it myself. Can not get it clear is how to establish “your SSID and SS PASSWORD “. My 86 year old brain does not recall the answer that I should remember. Please help me remember.
    Thanks in advance.
    George
    Reply
    - Sara Santos
      
      August 27, 2020 at 5:31 pm
      
      Hi George.
      The SSID and password are the credentials that you use to connect to your home wi-fi.
      Usually, they are written on a label on your router.
      Alternatively, you can go to your wi-fi settings and see the name of your network (SSID), usually you can also get your password from there.
      I hope this helps.
      Regards,
      Sara
      Reply
Martin

August 26, 2020 at 5:50 pm

sorry Rui,
but most problems I have on every projects are missing libs! This is really annoying .
I fail again at unfound libraries!!! although I have included both missing Libs as Zip Files !
my Lib folder :
C:\Users\Marti\Documents\Arduino\libraries\ESPAsyncTCP
C:\Users\Marti\Documents\Arduino\libraries\ESPAsyncWebServer

Compiler messages: Arduino: 1.8.13 (Windows Store 1.8.42.0) (Windows 10), Board: “LOLIN(WEMOS) D1 mini Pro, 80 MHz, Flash, Legacy (new can return nullptr), All SSL ciphers (most compatible), 16MB (FS:14MB OTA:’1019KB), v2 Lower Memory, Disabled, None, Only Sketch, 921600′

webservSlider_Rui:14:25: fatal error: ESPAsyncTCP.h: No such file or directory
Multiple libraries were found for ESP8266WiFi.h
#include <ESPAsyncTCP.h>
Uses: C:-Users-Marti-Documents-Arduino-libraries-ESP8266WiFi
Not used: C:-Users-Marti-Documents-ArduinoData-packages-esp8266-hardware-esp8266-2.7.4-libraries-ESP8266WiFi
compilation terminated.
exit status 1
ESPAsyncTCP.h: No such file or directory

best greetings Martin
Reply
- Dirk
  
  July 29, 2023 at 9:56 am
  
  Dear Martin,
  
  I just did visit the GitHub Pages, downloaded the complete repo as ZIP file and den installed the Zip-File via the library function.
  
  Best
  
  Dirk
  Reply
Neil

September 25, 2020 at 11:34 am

Hi, is it possible to have multiple sliders on one page? I have tried to expand on your single slider code however cannot seem to get it to work. Three sliders would be good to set values for RGB LED. Any ideas? Thanks.
Reply
- CLL
  
  October 15, 2020 at 3:30 pm
  
  Hi!
  
  I was looking for the same thing, but I found this tutorial in which they use a color picker to give an RGB LED its color.
  
  https://randomnerdtutorials.com/esp32-esp8266-rgb-led-strip-web-server/
  
  Don’t know if this is what you are looking for, but it works perfectly!
  Reply
- Martin Larsen
  
  January 25, 2021 at 12:03 pm
  
  I looked into it and had issues – adding extra sliders is easily done in the HTML body:
  
  %SLIDERVALUE1%
  
  %SLIDERVALUE2%
  
  but to know which slider was being updated requires it to send it’s index.
  That is done in the java handler:
  
  var xhr = new XMLHttpRequest();
  xhr.open(“GET”, “/slider?value=”+sliderValue1+”&index=1”, true);
  xhr.send();
  
  and in the asynchrounious request handler, you read both value and index:
  
  if (request->hasParam(PARAM_INPUT_1)&request->hasParam(PARAM_INPUT_2)) { SliderIndex = request->getParam(PARAM_INPUT_2)->value();
  
  just as it was shown in the example with relay control.
  
  I hope this is clear…
  Reply
  - AJ
    
    March 27, 2021 at 8:54 pm
    
    Hi, unfortunately not. Can you please update your code for 2 sliders? Thanks.
    Reply
    - anil kumar
      
      February 16, 2023 at 10:12 am
      
      this project has multiple sliders https://randomnerdtutorials.com/esp8266-nodemcu-web-server-websocket-sliders/
      Reply
- Hairyloon
  
  February 1, 2021 at 2:23 pm
  
  I had the same question, which I see some people have answered.
  I’ve been trying to use javascript classes to do it, based on this tutorial:
  https://codekila.com/javascript-get-multiple-elements/
  
  I’ve not quite got it to work yet though…
  Reply
william mccarthy

October 3, 2020 at 10:45 am

worked first time with one problem, the slider works backwards, ie ) is max brightness
William
Reply
- Hairyloon
  
  February 1, 2021 at 2:19 pm
  
  Yes, that is to be expected. The builtin LED is active low.
  Reply
Hairyloon

February 1, 2021 at 2:25 pm

I think I am missing something obvious, but why does the slider go to 1023 when the PWM is usually 8 bit?
Reply
- Hillary
  
  July 19, 2022 at 9:16 am
  
  thanks It works perfectly but I’m a bit confused whether we use 1023 or 255
  Reply
  - Sara Santos
    
    July 22, 2022 at 10:26 am
    
    For ESP8266 releases before 3.0, the default range is between 0 and 1023.
    The PWM range may be changed by calling analogWriteRange(new_range).
    https://randomnerdtutorials.com/esp8266-pwm-arduino-ide/
    I hope this is clear.
    Regards,
    Sara
    Reply
Wijnand Nijs

February 25, 2021 at 1:48 pm

@Martin Larsen
Can you give me the whole:

if (request->hasParam(PARAM_INPUT_1)&request->hasParam(PARAM_INPUT_2))
{
SliderIndex = request->getParam(PARAM_INPUT_2)->value();

for two sliders?
Thanks…
Reply
tsung

July 21, 2021 at 3:11 pm

Hi
I want to know that for library files like ESPAsyncWebServer, if I want to know the specific function of a method, such as the on method, how can I find it? I tried to find the author’s github homepage, but I only saw a readme . I don’t know how to find a specific method in the readme doc.
Reply
Paolo De Caro

November 9, 2021 at 2:14 pm

Good evening Rui, I kindly ask you for a little help. I would like to adapt this design to drive a dc engine. In practice I would like to add 3 buttons: one to start the engine forward; a button to start the engine in reverse; a button to stop the engine. The slider to vary the motor speed. Can you kindly give me some indications on how to write the buttons and their work. Thanks .
Kind regards
Paolo
Bari Italia
Reply
- Sara Santos
  
  November 9, 2021 at 9:56 pm
  
  Hi.
  First, you need to know how to control DC motors (the following tutorial is for the ESP32, but is is similar for an ESP8266:
  – https://randomnerdtutorials.com/esp32-dc-motor-l298n-motor-driver-control-speed-direction/
  Then, you can get some ideas from this ESP32-CAM tutorial:
  – https://randomnerdtutorials.com/esp32-cam-car-robot-web-server/
  I hope this helps.
  Regards,
  Sara
  Reply
  - Paolo
    
    November 11, 2021 at 11:41 am
    
    Hello and thank you for your reply. But my problem is having to add buttons to this html that activate an engine. Could you give me some help how to integrate html and js code to be able to manage html buttons as well. I also know the instructions for running an engine. Thanks in advance. Kind regards
    Paul
    Reply
    - Paolo De Caro
      
      November 14, 2021 at 12:23 pm
      
      Hello, so I managed to integrate the buttons to the scketch slider,
      I kindly ask you for a little help, I have inserted a delay in the code that performs engine startup, but this delay is completely ignored. Because ? Thanks in advance, I am attaching the piece of code.
      
      function Motore1_avanti(element) {
      //alert(“passo_1 sono dentro js motore1on”);
      var Motore1_avanti_Value = document.getElementById(“Motore1_avanti”).value;
      //alert(“passo_2 sono dentro js motore1on”);
      document.getElementById(“textMotore1_avanti_Value”).innerHTML = Motore1_avanti_Value;
      //alert(“passo_3 sono dentro js motore1on”);
      //alert(motore1_avanti_Value);
      console.log(Motore1_avanti_Value);
      var xhr = new XMLHttpRequest();
      xhr.open(“GET”, “/Motore1_avanti?value=”+Motore1_avanti_Value, true);
      xhr.send();
      }
      
      // Send a GET request to /Motore1_avanti?value=
      server.on(“/Motore1_avanti”, HTTP_GET, [] (AsyncWebServerRequest *request) {
      String inputMessage;
      // GET input1 value on /motore1_avanti?value=
      if (request->hasParam(PARAM_INPUT)) {
      inputMessage = request->getParam(PARAM_INPUT)->value();
      Motore1_avanti_Value = inputMessage;
      //analogWrite(output, Motore1_avanti_Value.toInt());
      delay(10000);
      digitalWrite(IN_1, LOW);
      digitalWrite(IN_2, LOW);
      analogWrite(ENA, speedCar);
      delay(1000);
      digitalWrite(IN_1, HIGH);
      digitalWrite(IN_2, LOW);
      analogWrite(ENA, sliderValue.toInt());
      // Luce Avanti
      analogWrite(A_RED, 255);
      analogWrite(A_GREEN, 255);
      analogWrite(A_BLUE, 255);
      //digitalWrite(D2,HIGH);
      //digitalWrite(D4,LOW);
      }
      else {
      inputMessage = “Non sente il bottone”;
      }
      Serial.println(inputMessage);
      request->send(200, “text/plain”, “OK”);
      });
      Reply
      - Ramon
        
        October 17, 2023 at 12:05 pm
        
        good morning.
        I am trying to add buttons too but you are not able, can you send me the simple example with the slider and a button.
        thank you very much for your help.
Kaelan

January 22, 2022 at 10:46 pm

Hi,

how i can show the % instead of the Value from the slider?
Can someone help me?
Reply
Ilya

February 10, 2023 at 8:12 pm

Hello, i”m trying this slider make in a vertical position,
some parts of it -> transformed, but moving part(cursor) didn’t.
I need Help to change an orientation of this slider.
Reply
- Ramon
  
  October 17, 2023 at 12:08 pm
  
  Good morning.
  you got it ??
  Can you tell me how?
  thank you so much
  Reply
Oner

February 21, 2024 at 5:45 pm

Hello,
I want to add 2 or more slider to this project. Could you explain it?
Reply
- Sara Santos
  
  February 21, 2024 at 9:18 pm
  
  Hi.
  Check out this tutorial: https://randomnerdtutorials.com/esp8266-nodemcu-web-server-websocket-sliders/
  Regards,
  Sara
  Reply
Goos Kant

April 15, 2024 at 3:56 pm

Does this example work together with WiFiManager? It seems that I get library conflicts.
Reply