{"id":98897,"date":"2020-08-25T15:38:30","date_gmt":"2020-08-25T15:38:30","guid":{"rendered":"https:\/\/randomnerdtutorials.com\/?p=98897"},"modified":"2025-03-17T10:32:28","modified_gmt":"2025-03-17T10:32:28","slug":"esp8266-nodemcu-web-server-slider-pwm","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-web-server-slider-pwm\/","title":{"rendered":"ESP8266 NodeMCU Web Server with Slider: Control LED Brightness (PWM)"},"content":{"rendered":"\n<p>This tutorial shows how to build an ESP8266 NodeMCU web server with a slider to control the LED brightness. You&#8217;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&#8217;ll use that value to control the duty cycle of a <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-pwm-arduino-ide\/\">PWM signal<\/a> and change the brightness of an LED. Instead of an LED, you can control a servo motor, for example.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-NodeMCU-Slider-Control-LED-Brightness-PWM.jpg?resize=1024%2C576&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Web Server with Slider Control LED Brightness PWM using Arduino IDE\" class=\"wp-image-98891\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-NodeMCU-Slider-Control-LED-Brightness-PWM.jpg?resize=1024%2C576&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-NodeMCU-Slider-Control-LED-Brightness-PWM.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-NodeMCU-Slider-Control-LED-Brightness-PWM.jpg?resize=768%2C432&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-NodeMCU-Slider-Control-LED-Brightness-PWM.jpg?w=1280&amp;quality=100&amp;strip=all&amp;ssl=1 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Additionally, you can also modify the code in this tutorial to add a slider to <a href=\"https:\/\/randomnerdtutorials.com\/projects-esp8266\/\">your projects<\/a> to set a threshold value or any other value you need to use in your code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Project Overview<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"853\" height=\"604\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Control-LED-Brightness.png?resize=853%2C604&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Slider Web Server Control LED Brightness\" class=\"wp-image-98901\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Control-LED-Brightness.png?w=853&amp;quality=100&amp;strip=all&amp;ssl=1 853w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Control-LED-Brightness.png?resize=300%2C212&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Control-LED-Brightness.png?resize=768%2C544&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 853px) 100vw, 853px\" \/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>The ESP8266 hosts a web server that displays a web page with a slider;<\/li>\n\n\n\n<li>When you move the slider, you make an HTTP request to the ESP8266 with the new slider value;<\/li>\n\n\n\n<li>The HTTP request comes in the following format: <span class=\"rnthl rntliteral\">GET\/slider?value=SLIDERVALUE<\/span>, in which <span class=\"rnthl rntliteral\">SLIDERVALUE<\/span> is a number between 0 and 1023. You can modify your slider to include any other range;<\/li>\n\n\n\n<li>From the HTTP request, the ESP8266 gets the current value of the slider;<\/li>\n\n\n\n<li>The ESP8266 adjusts the PWM duty cycle accordingly to the slider value;<\/li>\n\n\n\n<li>This can be useful to control the brightness of an LED (as we&#8217;ll do in this example), a servo motor, setting up a threshold value or other applications.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Before proceeding with this project, make sure you check the following prerequisites.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Arduino IDE<\/h3>\n\n\n\n<p>We\u2019ll 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.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/installing-esp8266-nodemcu-arduino-ide-2-0\/\" title=\"\">Installing ESP8266 NodeMCU Board in Arduino IDE<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Async Web Server Libraries<\/h3>\n\n\n\n<p>We&#8217;ll build the web server using the following libraries:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncWebServer\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncWebServer by ESP32Async<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/ESP32Async\/ESPAsyncTCP\" target=\"_blank\" rel=\"noopener\" title=\"\">ESPAsyncTCP\u00a0by ESP32Async<\/a><\/li>\n<\/ul>\n\n\n\n<p>You can install these libraries using the Arduino Library Manager. Go to&nbsp;<strong>Sketch&nbsp;<\/strong>&gt;&nbsp;<strong>Include Library<\/strong>&nbsp;&gt;&nbsp;<strong>Manage Libraries<\/strong>&nbsp;and search for the libraries&#8217; names.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Code<\/h2>\n\n\n\n<p>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 a servo motor, for example.<\/p>\n\n\n\n<p>Copy the code to your Arduino IDE. Insert your network credentials and the code will work straight way.<\/p>\n\n\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos &amp; Sara Santos - Random Nerd Tutorials\n  Complete project details at https:\/\/RandomNerdTutorials.com\/esp8266-nodemcu-web-server-slider-pwm\/\n  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.\n  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n*********\/\n\n\/\/ Import required libraries\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;ESPAsyncTCP.h&gt;\n#include &lt;ESPAsyncWebServer.h&gt;\n\n\/\/ Replace with your network credentials\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\nconst int output = 2;\n\nString sliderValue = &quot;0&quot;;\n\nconst char* PARAM_INPUT = &quot;value&quot;;\n\n\/\/ Create AsyncWebServer object on port 80\nAsyncWebServer server(80);\n\nconst char index_html[] PROGMEM = R&quot;rawliteral(\n&lt;!DOCTYPE HTML&gt;&lt;html&gt;\n&lt;head&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;\n  &lt;title&gt;ESP Web Server&lt;\/title&gt;\n  &lt;style&gt;\n    html {font-family: Arial; display: inline-block; text-align: center;}\n    h2 {font-size: 2.3rem;}\n    p {font-size: 1.9rem;}\n    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}\n    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;\n      outline: none; -webkit-transition: .2s; transition: opacity .2s;}\n    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}\n    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } \n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;h2&gt;ESP Web Server&lt;\/h2&gt;\n  &lt;p&gt;&lt;span id=&quot;textSliderValue&quot;&gt;%SLIDERVALUE%&lt;\/span&gt;&lt;\/p&gt;\n  &lt;p&gt;&lt;input type=&quot;range&quot; onchange=&quot;updateSliderPWM(this)&quot; id=&quot;pwmSlider&quot; min=&quot;0&quot; max=&quot;1023&quot; value=&quot;%SLIDERVALUE%&quot; step=&quot;1&quot; class=&quot;slider&quot;&gt;&lt;\/p&gt;\n&lt;script&gt;\nfunction updateSliderPWM(element) {\n  var sliderValue = document.getElementById(&quot;pwmSlider&quot;).value;\n  document.getElementById(&quot;textSliderValue&quot;).innerHTML = sliderValue;\n  console.log(sliderValue);\n  var xhr = new XMLHttpRequest();\n  xhr.open(&quot;GET&quot;, &quot;\/slider?value=&quot;+sliderValue, true);\n  xhr.send();\n}\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n)rawliteral&quot;;\n\n\/\/ Replaces placeholder with button section in your web page\nString processor(const String&amp; var){\n  \/\/Serial.println(var);\n  if (var == &quot;SLIDERVALUE&quot;){\n    return sliderValue;\n  }\n  return String();\n}\n\nvoid setup(){\n  \/\/ Serial port for debugging purposes\n  Serial.begin(115200);\n\n  analogWrite(output, sliderValue.toInt());\n\n  \/\/ Connect to Wi-Fi\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(1000);\n    Serial.println(&quot;Connecting to WiFi..&quot;);\n  }\n\n  \/\/ Print ESP Local IP Address\n  Serial.println(WiFi.localIP());\n\n  \/\/ Route for root \/ web page\n  server.on(&quot;\/&quot;, HTTP_GET, [](AsyncWebServerRequest *request){\n    request-&gt;send(200, &quot;text\/html&quot;, index_html, processor);\n  });\n\n  \/\/ Send a GET request to &lt;ESP_IP&gt;\/slider?value=&lt;inputMessage&gt;\n  server.on(&quot;\/slider&quot;, HTTP_GET, [] (AsyncWebServerRequest *request) {\n    String inputMessage;\n    \/\/ GET input1 value on &lt;ESP_IP&gt;\/slider?value=&lt;inputMessage&gt;\n    if (request-&gt;hasParam(PARAM_INPUT)) {\n      inputMessage = request-&gt;getParam(PARAM_INPUT)-&gt;value();\n      sliderValue = inputMessage;\n      analogWrite(output, sliderValue.toInt());\n    }\n    else {\n      inputMessage = &quot;No message sent&quot;;\n    }\n    Serial.println(inputMessage);\n    request-&gt;send(200, &quot;text\/plain&quot;, &quot;OK&quot;);\n  });\n  \n  \/\/ Start server\n  server.begin();\n}\n  \nvoid loop() {\n  \n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/ESP8266\/ESP8266_Slider_PWM.ino\" target=\"_blank\">View raw code<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the Code Works<\/h2>\n\n\n\n<p>Continue reading to learn how the code works or skip to the next section.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importing libraries<\/h3>\n\n\n\n<p>First, import the required libraries. The <span class=\"rnthl rntliteral\">ESP8266WiFi<\/span>, <span class=\"rnthl rntliteral\">ESPAsyncWebServer <\/span>and the <span class=\"rnthl rntliteral\">ESPAsyncTCP<\/span> are needed to build the web server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>#include &lt;ESP8266WiFi.h&gt;\n#include &lt;ESPAsyncTCP.h&gt;\n#include &lt;ESPAsyncWebServer.h&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Setting your network credentials<\/h3>\n\n\n\n<p>Insert your network credentials in the following variables, so that the ESP8266 can connect to your local network.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* ssid = \"REPLACE_WITH_YOUR_SSID\";\nconst char* password = \"REPLACE_WITH_YOUR_PASSWORD\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Variables definition<\/h3>\n\n\n\n<p>We&#8217;ll control the brightness of the ESP8266 built-in LED. The built-in LED corresponds to <span class=\"rnthl rntclblue\">GPIO 2<\/span>. Save the GPIO we want to control on the <span class=\"rnthl rntliteral\">output<\/span> variable.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const int output = 2;<\/code><\/pre>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">sliderValue<\/span> variable will hold the slider value. At start, it is set to zero.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>String sliderValue = \"0\";<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Input Parameters<\/h3>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">PARAM_INPUT<\/span> variable will be used to &#8220;search&#8221; 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 <span class=\"rnthl rntliteral\">GET\/slider?value=SLIDERVALUE<\/span>) <\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>const char* PARAM_INPUT = \"value\";<\/code><\/pre>\n\n\n\n<p>It will search for <span class=\"rnthl rntliteral\">value<\/span> on the URL and get the value assigned to it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Building the Web Page<\/h3>\n\n\n\n<p>Let&#8217;s now proceed to the web server page.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"884\" height=\"685\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Page-Explained.png?resize=884%2C685&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Slider Web Server How it Works\" class=\"wp-image-98902\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Page-Explained.png?w=884&amp;quality=100&amp;strip=all&amp;ssl=1 884w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Page-Explained.png?resize=300%2C232&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-Slider-Web-Server-Page-Explained.png?resize=768%2C595&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/figure><\/div>\n\n\n<p>The web page for this project is pretty simple. It contains one heading, one paragraph and one input of type range.<\/p>\n\n\n\n<p>Let&#8217;s see how the web page is created.<\/p>\n\n\n\n<p>All the HTML text with styles included is stored in the <span class=\"rnthl rntliteral\">index_html<\/span> variable. Now we\u2019ll go through the HTML text and see what each part does.<\/p>\n\n\n\n<p>The following <span style=\"color: #333399;\">&lt;meta&gt;<\/span> tag makes your web page responsive in any browser.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/code><\/pre>\n\n\n\n<p>Between the <span style=\"color: #333399;\">&lt;title&gt; &lt;\/title&gt;<\/span> tags goes the title of our web server. The title is the text that shows up on the web browser tab.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Styles<\/h4>\n\n\n\n<p>Between the <span style=\"color: #333399;\">&lt;style&gt;&lt;\/style&gt;<\/span> tags, we add some CSS to style the web page.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;style&gt;\n  html {font-family: Arial; display: inline-block; text-align: center;}\n  h2 {font-size: 2.3rem;}\n  p {font-size: 1.9rem;}\n  body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}\n  .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;\n    outline: none; -webkit-transition: .2s; transition: opacity .2s;}\n  .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}\n  .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>Basically, we&#8217;re setting the HTML page to display the text with Arial font in block without margin, and aligned at the center.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>html {font-family: Arial; display: inline-block; text-align: center;}<\/code><\/pre>\n\n\n\n<p>The following lines set the font size for the heading (<span class=\"rnthl rntliteral\">h2<\/span>) and paragraph (<span class=\"rnthl rntliteral\">p<\/span>).<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>h2 {font-size: 2.3rem;}\np {font-size: 1.9rem;}<\/code><\/pre>\n\n\n\n<p>Set the HTML body properties.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}<\/code><\/pre>\n\n\n\n<p>The following lines customize the slider:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;\n      outline: none; -webkit-transition: .2s; transition: opacity .2s;}\n.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}\n.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } <\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">HTML Body<\/h4>\n\n\n\n<p>Inside the <span style=\"color: #333399;\">&lt;body&gt;&lt;\/body&gt;<\/span> tags is where we add the web page content.<\/p>\n\n\n\n<p>The <span style=\"color: #333399;\">&lt;h2&gt;&lt;\/h2&gt;<\/span> tags add a heading to the web page. In this case, the \u201cESP Web Server\u201d text, but you can add any other text.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;h2&gt;ESP Web Server&lt;\/h2&gt;<\/code><\/pre>\n\n\n\n<p>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>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p&gt;&lt;span id=\"textSliderValue\"&gt;%SLIDERVALUE%&lt;\/span&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>The <span class=\"rnthl rntliteral\">%SLIDERVALUE%<\/span> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Slider<\/h3>\n\n\n\n<p>To create a slider in HTML you use the <span style=\"color: #333399;\">&lt;input&gt;<\/span> tag. The <span style=\"color: #333399;\">&lt;input&gt;<\/span> tag specifies a field where the user can enter data.<\/p>\n\n\n\n<p>There are a wide variety of input types. To define a slider, use the \u201c<strong>type<\/strong>\u201d attribute with the \u201c<strong>range<\/strong>\u201d value. In a slider, you also need to define the minimum and the maximum range using the \u201c<strong>min<\/strong>\u201d and \u201c<strong>max<\/strong>\u201d attributes (in this case, <span class=\"rnthl rntliteral\">0<\/span> and <span class=\"rnthl rntliteral\">1023<\/span>, respectively). <\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;p&gt;&lt;input type=\"range\" onchange=\"updateSliderPWM(this)\" id=\"pwmSlider\" min=\"0\" max=\"1023\" value=\"%SLIDERVALUE%\" step=\"1\" class=\"slider\"&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>You also need to define other attributes like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the <strong>step<\/strong> attribute specifies the interval between valid numbers. In our case, it is set to <span class=\"rnthl rntliteral\">1<\/span>;<\/li>\n\n\n\n<li>the <strong>class<\/strong> to style the slider (<span class=\"rnthl rntliteral\">class=&#8221;slider&#8221;<\/span>);<\/li>\n\n\n\n<li>the <strong>id<\/strong> to update the current position displayed on the web page;<\/li>\n\n\n\n<li> the <strong>onchange<\/strong> attribute to call a function (<span class=\"rnthl rntliteral\">updateSliderPWM(this)<\/span>) to send an HTTP request to the ESP8266 when the slider moves. The <span class=\"rnthl rntliteral\">this<\/span> keyword refers to the current value of the slider.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Adding JavaScript to the HTML File<\/h3>\n\n\n\n<p>Next, you need to add some JavaScript code to your HTML file using the <span style=\"color: #333399;\">&lt;script&gt;<\/span> and <span style=\"color: #333399;\">&lt;\/script&gt;<\/span> tags. You need to add the <span class=\"rnthl rntliteral\">updateSliderPWM()<\/span> function that will make a request to the ESP8266 with the current slider value.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>&lt;script&gt;\nfunction updateSliderPWM(element) {\n  var sliderValue = document.getElementById(\"pwmSlider\").value;\n  document.getElementById(\"textSliderValue\").innerHTML = sliderValue;\n  console.log(sliderValue);\n  var xhr = new XMLHttpRequest();\n  xhr.open(\"GET\", \"\/slider?value=\"+sliderValue, true);\n  xhr.send();\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>This next line gets the current slider value by its id and saves it in the <span class=\"rnthl rntliteral\">sliderValue<\/span> JavaScript variable. Previously, we&#8217;ve assigned the id of the slider to <span class=\"rnthl rntliteral\">pwmSlider<\/span>. So, we get it as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>var sliderValue = document.getElementById(\"pwmSlider\").value;<\/code><\/pre>\n\n\n\n<p>After that, we set the slider label (whose id is <span class=\"rnthl rntliteral\">textSliderValue<\/span>) to the value saved on the <span class=\"rnthl rntliteral\">sliderValue<\/span> variable.<\/p>\n\n\n\n<p>Finally, make an <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-http-get-post-arduino\/\">HTTP GET request<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-html\"><code>var xhr = new XMLHttpRequest();\nxhr.open(\"GET\", \"\/slider?value=\"+sliderValue, true);\nxhr.send();<\/code><\/pre>\n\n\n\n<p>For example, when the slider is at <strong>0<\/strong>, you make an HTTP GET request on the following URL:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;ESP-IP-ADDRESS\/slider?value=0<\/code><\/pre>\n\n\n\n<p>And when the slider value is 200, you\u2019ll have a request on the follow URL.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>http:&#47;&#47;ESP-IP-ADDRESS\/slider?value=200<\/code><\/pre>\n\n\n\n<p>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&#8217;ll se in the next sections<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Processor<\/h3>\n\n\n\n<p>Now, we need to create the <span class=\"rnthl rntliteral\">processor()<\/span> 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.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Replaces placeholder with button section in your web page\nString processor(const String&amp; var){\n  \/\/Serial.println(var);\n  if (var == \"SLIDERVALUE\"){\n    return sliderValue;\n  }\n  return String();\n}<\/code><\/pre>\n\n\n\n<p>When the web page is requested, we check if the HTML has any placeholders. If it finds the <strong>%SLIDERVALUE%<\/strong> placeholder, we return the value saved on the <span class=\"rnthl rntliteral\">sliderValue<\/span> variable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">setup()<\/h3>\n\n\n\n<p>In the <span class=\"rnthl rntliteral\">setup(),<\/span> initialize the Serial Monitor for debugging purposes.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>Serial.begin(115200);<\/code><\/pre>\n\n\n\n<p>Set the duty cycle of the PWM signal to the value saved on the <span class=\"rnthl rntliteral\">sliderValue<\/span> (when the ESP8266 starts, it is set to 0).<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>analogWrite(output, sliderValue.toInt());<\/code><\/pre>\n\n\n\n<p>To learn more about PWM with the ESP8266, read our guide: <a href=\"https:\/\/randomnerdtutorials.com\/esp8266-pwm-arduino-ide\/\">ESP8266 PWM with Arduino IDE (Analog Output)<\/a>.<\/p>\n\n\n\n<p>Connect to your local network and print the ESP8266 IP address.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Connect to Wi-Fi\nWiFi.begin(ssid, password);\nwhile (WiFi.status() != WL_CONNECTED) {\n  delay(1000);\n  Serial.println(\"Connecting to WiFi..\");\n}\n\n\/\/ Print ESP Local IP Address\nSerial.println(WiFi.localIP());<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Handle Requests<\/h3>\n\n\n\n<p>Finally, add the next lines of code to handle the web server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Route for root \/ web page\nserver.on(\"\/\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/html\", index_html, processor);\n});\n\n\/\/ Send a GET request to &lt;ESP_IP&gt;\/slider?value=&lt;inputMessage&gt;\nserver.on(\"\/slider\", HTTP_GET, &#091;] (AsyncWebServerRequest *request) {\n  String inputMessage;\n  \/\/ GET input1 value on &lt;ESP_IP&gt;\/slider?value=&lt;inputMessage&gt;\n  if (request-&gt;hasParam(PARAM_INPUT)) {\n    inputMessage = request-&gt;getParam(PARAM_INPUT)-&gt;value();\n    sliderValue = inputMessage;\n    ledcWrite(ledChannel, sliderValue.toInt());\n  }\n  else {\n    inputMessage = \"No message sent\";\n  }\n  Serial.println(inputMessage);\n  request-&gt;send(200, \"text\/plain\", \"OK\");\n});<\/code><\/pre>\n\n\n\n<p>When we make a request on the root URL, we send the HTML text that is stored on the <span class=\"rnthl rntliteral\">index_html<\/span> variable. We also need to pass the <span class=\"rnthl rntliteral\">processor()<\/span> function, that will replace all the placeholders with the right values.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>\/\/ Route for root \/ web page\nserver.on(\"\/\", HTTP_GET, &#091;](AsyncWebServerRequest *request){\n  request-&gt;send_P(200, \"text\/html\", index_html, processor);\n});<\/code><\/pre>\n\n\n\n<p>We need another handler that will save the current slider value and set he LED brightness accordingly.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.on(\"\/slider\", HTTP_GET, &#091;] (AsyncWebServerRequest *request) {\n  String inputMessage;\n  \/\/ GET input1 value on &lt;ESP_IP&gt;\/slider?value=&lt;inputMessage&gt;\n  if (request-&gt;hasParam(PARAM_INPUT)) {\n    inputMessage = request-&gt;getParam(PARAM_INPUT)-&gt;value();\n    sliderValue = inputMessage;\n    ledcWrite(ledChannel, sliderValue.toInt());\n  }\n  else {\n    inputMessage = \"No message sent\";\n  }\n  Serial.println(inputMessage);\n  request-&gt;send(200, \"text\/plain\", \"OK\");\n});<\/code><\/pre>\n\n\n\n<p>Basically, we get the slider value on the following lines:<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>if (request-&gt;hasParam(PARAM_INPUT)) {\n  inputMessage = request-&gt;getParam(PARAM_INPUT)-&gt;value();\n  sliderValue = inputMessage;<\/code><\/pre>\n\n\n\n<p>Then, update the LED brightness (PWM duty cycle) using the <span class=\"rnthl rntliteral\">ledcWrite()<\/span> function that accepts as arguments the channel you want to control and the value.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>ledcWrite(ledChannel, sliderValue.toInt());<\/code><\/pre>\n\n\n\n<p>Lastly, start the server.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>server.begin();<\/code><\/pre>\n\n\n\n<p>Because this is an asynchronous web server, we don\u2019t need to write anything in the <span class=\"rnthl rntliteral\">loop()<\/span>.<\/p>\n\n\n\n<pre class=\"wp-block-code language-c\"><code>void loop(){\n\n}<\/code><\/pre>\n\n\n\n<p>That\u2019s pretty much how the code works.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Upload the Code<\/h2>\n\n\n\n<p>Now, upload the code to your ESP8266. Make sure you have the right board and COM port selected. <\/p>\n\n\n\n<p>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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"676\" height=\"362\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP32-ESP8266-PWM-Web-Server-Arduino-IDE-Serial-Monitor-IP-Address.png?resize=676%2C362&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP32 ESP8266 PWM Web Server Arduino IDE Serial Monitor IP Address\" class=\"wp-image-98890\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP32-ESP8266-PWM-Web-Server-Arduino-IDE-Serial-Monitor-IP-Address.png?w=676&amp;quality=100&amp;strip=all&amp;ssl=1 676w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP32-ESP8266-PWM-Web-Server-Arduino-IDE-Serial-Monitor-IP-Address.png?resize=300%2C161&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Web Server Demonstration<\/h2>\n\n\n\n<p>Open a browser and type the ESP8266 IP address. Your web server should display the slider and its current value.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"412\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-PWM-web-server-demonstration-f.png?resize=700%2C412&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"ESP8266 NodeMCU Slider PWM output web server demonstration\" class=\"wp-image-98906\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-PWM-web-server-demonstration-f.png?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-PWM-web-server-demonstration-f.png?resize=300%2C177&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/figure><\/div>\n\n\n<p>Move the slider and see the ESP8266 built-in LED increasing and decreasing its brightness.<\/p>\n\n\n<div style=\"text-align:center\"><iframe src=\"https:\/\/player.vimeo.com\/video\/451452436?color=ff9933&title=1&byline=0&portrait=0\" width=\"720\" height=\"405\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/div><\/br>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p>With this tutorial you&#8217;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&#8217;re controlling a PWM signal to control the brightness of an LED. Instead of an LED, you can control a servo motor, for example.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>If you&#8217;re using an ESP32 board, read <a href=\"https:\/\/randomnerdtutorials.com\/esp32-web-server-slider-pwm\/\">ESP32 Web Server with Slider Control LED Brightness (PWM)<\/a>.<\/p>\n\n\n\n<p>We hope you&#8217;ve found this project useful. You may also like the following tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp-now-two-way-communication-esp8266-nodemcu\/\">ESP-NOW Two-Way Communication Between ESP8266 NodeMCU Boards<\/a><\/li>\n\n\n\n<li><a style=\"font-size: inherit; background-color: initial;\" href=\"https:\/\/randomnerdtutorials.com\/esp32-esp8266-web-server-timer-pulse\/\">ESP Web Server &#8211; Control Outputs with Timer<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-dht11dht22-temperature-and-humidity-web-server-with-arduino-ide\/\">ESP8266 DHT11\/DHT22 Web Server \u2013 Temperature and Humidity<\/a><\/li>\n<\/ul>\n\n\n\n<p>Learn more about the ESP8266 with our resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/randomnerdtutorials.com\/home-automation-using-esp8266\/\"><strong>Home Automation using ESP8266 (eBook)<\/strong><\/a><\/li>\n\n\n\n<li><a style=\"font-size: inherit; background-color: initial;\" href=\"https:\/\/randomnerdtutorials.com\/projects-esp8266\/\">More ESP8266 NodeMCU Projects and Tutorials&#8230;<\/a><\/li>\n<\/ul>\n\n\n\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to build an ESP8266 NodeMCU web server with a slider to control the LED brightness. You&#8217;ll learn how to add a slider to your web server &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"ESP8266 NodeMCU Web Server with Slider: Control LED Brightness (PWM)\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-web-server-slider-pwm\/#more-98897\" aria-label=\"Read more about ESP8266 NodeMCU Web Server with Slider: Control LED Brightness (PWM)\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":98891,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[265,214,246,300,240,264],"tags":[],"class_list":["post-98897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266-project","category-esp8266","category-esp8266-arduino-ide","category-0-esp8266","category-esp8266-projects","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2020\/08\/ESP8266-NodeMCU-Slider-Control-LED-Brightness-PWM.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/98897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=98897"}],"version-history":[{"count":1,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/98897\/revisions"}],"predecessor-version":[{"id":168042,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/98897\/revisions\/168042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/98891"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=98897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=98897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=98897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}