<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">In this ESP32 web server project, we will create a web page hosted on ESP32 which we will be used to control the speed of a DC motor using the L298N motor driver module. A web page will consist of an HTML slider that will be used to generate variable duty cycle PWM for a DC motor. The slider will be moved to set duty cycle value. In response, this slider value will set the value of the PWM signal generated by ESP32. In short, this variable duty cycle PWM will control the speed of the DC motor.</p>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">We have a similar guide with ESP8266 NodeMCU:</p>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;"><a href="https://microcontrollerslab.com/esp8266-nodemcu-web-server-control-dc-motor-speed/" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">ESP8266 NodeMCU Web Server Control DC Motor Speed</a></li>
   </ul>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">Previously, we controlled the brightness of an LED connected with ESP32 GPIO pin through the slider web server. You can view it below:</p>
<div class="code-block code-block-3" style="border: 0px; margin: 8px 0px; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff; clear: both;">
   <figure class="wp-block-image size-full" style="margin: 0px; max-width: 100%; height: auto;"><a href="https://www.pcbway.com/HighQualityOrderOnline.aspx?from=microcontrollerlab.com2022D" target="_blank" rel=" noreferrer noopener" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;"><img src="https://microcontrollerslab.com/wp-content/uploads/2022/11/728x280.jpg" alt="" class="wp-image-36540" style="height: auto; max-width: 100%; border: 0px; vertical-align: bottom; box-sizing: border-box;" /></a></figure>
   </div>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;"><a href="https://microcontrollerslab.com/esp32-pwm-slider-web-server-control-led-brightness/" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">ESP32 PWM Slider Web Server – Control LED Brightness</a></li>
   </ul>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">In a previous article, we also built an ESP32/ESP8266 slider web server. We used the slider to control the onboard LED of the ESP board and turned it ON for a certain number of seconds. We will use the same method to create the slider as we did in that user guide. You can have a look at that article as well:</p>
<div class="code-block code-block-1" style="border: 0px; margin: 8px auto; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff; text-align: center; clear: both;">
   <div class="adsbyvli" data-ad-slot="vi_534064800" data-id="vi_534064800_1" style="border: 0px; padding: 0px; margin: 0px auto !important; width: 300px !important; height: initial !important; visibility: visible !important; opacity: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 250px !important;"><vli id="container_vi_534064800_1" style="visibility: visible; display: block !important; position: relative !important; margin: 0px auto !important;"><vli id="vi_534064800_1" data-google-query-id="CJuLlc2ktf0CFSTkTAIdjsUGew" style="visibility: visible;">
            <div id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_10__container__" style="border: 0pt none; margin: 0px; padding: 0px; display: inline-block; width: 300px; height: 250px;"><iframe frameborder="0" src="https://ea451a009d08f52b698c908741af5925.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html" id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_10" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="c" data-load-complete="true" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; max-width: 100%; vertical-align: bottom;"></iframe></div>
            </vli></vli></div>
   </div>
<p class="has-white-color has-text-color has-background" style="border: 0px; margin-bottom: 1.5em; padding: 1.25em 2.375em; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #04d562; color: var(--wp--preset--color--white)  !important;"><a href="https://microcontrollerslab.com/esp32-esp8266-web-server-control-outputs-timer/" style="color: #1b78e2; border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none;" target="_blank"><span style="border: 0px; margin: 0px; padding: 0px; text-decoration-line: underline;">ESP32/ESP8266 Web Server to Control Outputs with a Timer (Pulse Width)</span></a></p>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;">Moreover, you can also go through the recommended reading given below. It is a useful MicroPython guide in which we used L298N motor driver along with ESP32 to control the speed and direction of a DC motor. We will be using a similar approach in this guide as well but will program our ESP32 board using Arduino IDE and include a web server with slider instead to control the speed.</li>
   </ul>
<p class="has-white-color has-text-color has-background" style="border: 0px; margin-bottom: 1.5em; padding: 1.25em 2.375em; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #59e370; color: var(--wp--preset--color--white)  !important;">Recommended Reading:&nbsp;<a href="https://microcontrollerslab.com/micropython-dc-motor-l298n-driver-esp32-esp8266/" style="color: #1b78e2; border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none;" target="_blank"><span style="border: 0px; margin: 0px; padding: 0px; text-decoration-line: underline;">MicroPython Control a DC Motor using L298N Driver with ESP32 and ESP8266</span></a></p>
<h2 id="h-esp32-dc-motor-control-web-server-overview" style="border: 0px; margin: 0px 0px 6px; padding: 0px; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 30px; line-height: 1.2em; color: #262626; background-color: #ffffff;">ESP32 DC Motor Control Web Server Overview</h2>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">We will create an ESP32 web server based on a slider that will be used to control the speed of a DC motor. The web server will consist of a title, “DC Motor Speed Control Web Server,” a slider to set the value that will set the PWM value and the slider value.</p>
<div class="wp-block-image" style="border: 0px; margin: 0px 0px 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <figure class="aligncenter size-full" style="margin: 0px auto; display: table; clear: both; max-width: 100%; height: auto; text-align: center;"><img data-attachment-id="28567" data-permalink="https://microcontrollerslab.com/esp32-web-server-dc-motor-speed-l298n-driver/esp32-dc-motor-speed-control-web-server-overview/#main" data-orig-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-DC-Motor-Speed-Control-Web-Server-Overview.jpg" data-orig-size="635,571" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;User&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1638815245&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="ESP32 DC Motor Speed Control Web Server Overview" data-image-description="" data-image-caption="" data-medium-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-DC-Motor-Speed-Control-Web-Server-Overview.jpg" data-large-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-DC-Motor-Speed-Control-Web-Server-Overview.jpg" decoding="async" width="635" src="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-DC-Motor-Speed-Control-Web-Server-Overview.jpg" alt="ESP32 DC Motor Speed Control Web Server Overview" class="wp-image-28567" style="height: auto; max-width: 100%; vertical-align: bottom; box-sizing: border-box;" />
      <figcaption style="display: table-caption; margin-top: 0.5em; margin-bottom: 1em; font-size: 13px; caption-side: bottom;">ESP32 Slider Web Server Overview</figcaption>
      </figure>
   </div>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">We will start by uploading our Arduino sketch to our ESP32 board. In our serial monitor, we will obtain the IP address of our module that will help us access the web server. Copy that IP address in a web browser and press enter. The web server will be displayed.</p>
<div class="code-block code-block-1" style="border: 0px; margin: 8px auto; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff; text-align: center; clear: both;">
   <div class="adsbyvli" data-ad-slot="vi_534064800" data-id="vi_534064800_2" style="border: 0px; padding: 0px; margin: 0px auto !important; width: 300px !important; height: initial !important; visibility: visible !important; opacity: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 250px !important;"><vli id="container_vi_534064800_2" style="visibility: visible; display: block !important; position: relative !important; margin: 0px auto !important;"><vli id="vi_534064800_2" data-google-query-id="CKe6vs2ktf0CFRMOYAod-i4Lsg" style="visibility: visible;">
            <div id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_11__container__" style="border: 0pt none; margin: 0px; padding: 0px; display: inline-block; width: 300px; height: 250px;"><iframe frameborder="0" src="https://ea451a009d08f52b698c908741af5925.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html" id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_11" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="d" data-load-complete="true" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; max-width: 100%; vertical-align: bottom;"></iframe></div>
            </vli></vli></div>
   </div>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">Now we will move the slider to set the PWM value. This will generate an HTTP request with the slider value to our ESP32 board. The slider value will also update to a new one as we move the slider. In our program sketch, we will set the slider value range between 0-255 as we will be using 8-bit resolution for optimization. You can set your own range as well. Hence, the slider can take a minimum value of 0 (motor stop) and a maximum of 255 (maximum speed of motor). When the ESP32 receives the slider value, this value is used to set the PWM signal at the enable pin. Thus the slider will be used to control the speed of the DC motor where the increasing values increase the speed.</p>
<p class="has-base-3-color has-accent-background-color has-text-color has-background" style="border: 0px; margin-bottom: 1.5em; padding: 1.25em 2.375em; color: var(--base-3); font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px;">Note: The speed control pins labelled ENA and ENB on the module, control the speed of the dc motor via the PWM signal</p>
<h3 id="h-required-components" style="border: 0px; margin: 0px 0px 16px; padding: 0px; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 25px; line-height: 1.2em; color: #0c0c0c; background-color: #ffffff;">Required Components</h3>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">For this project we will require the following components:</p>
<ol style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;">ESP32 board</li>
   <li style="border: 0px; margin: 0px; padding: 0px;">L298N Motor Driver</li>
   <li style="border: 0px; margin: 0px; padding: 0px;">One DC Motor</li>
   <li style="border: 0px; margin: 0px; padding: 0px;">Connecting wires</li>
   <li style="border: 0px; margin: 0px; padding: 0px;">External 3-12 V power supply</li>
   </ol>
<h2 id="h-esp32-dc-motor-speed-control-web-server-schematic-diagram" style="border: 0px; margin: 0px 0px 6px; padding: 0px; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 30px; line-height: 1.2em; color: #262626; background-color: #ffffff;">ESP32 DC Motor Speed Control Web Server Schematic Diagram</h2>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">Assemble the circuit as shown in the connection diagram below.</p>
<div class="code-block code-block-1" style="border: 0px; margin: 8px auto; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff; text-align: center; clear: both;">
   <div class="adsbyvli" data-ad-slot="vi_534064800" data-id="vi_534064800_3" style="border: 0px; padding: 0px; margin: 0px auto !important; width: 300px !important; height: initial !important; visibility: visible !important; opacity: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 250px !important;"><vli id="container_vi_534064800_3" style="visibility: visible; display: block !important; position: relative !important; margin: 0px auto !important; width: 300px !important; height: 250px !important;"><vli id="vi_534064800_3" data-google-query-id="COXztc6ktf0CFUddKgodwhwOyQ" style="visibility: visible;">
            <div id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_12__container__" style="border: 0pt none; margin: 0px; padding: 0px; display: inline-block; width: 300px; height: 250px;"><iframe frameborder="0" src="https://ea451a009d08f52b698c908741af5925.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html" id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_12" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="e" data-load-complete="true" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; max-width: 100%; vertical-align: bottom;"></iframe></div>
            </vli></vli></div>
   </div>
<div class="wp-block-image" style="border: 0px; margin: 0px 0px 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <figure class="aligncenter size-full" style="margin: 0px auto; display: table; clear: both; max-width: 100%; height: auto; text-align: center;"><img data-attachment-id="28562" data-permalink="https://microcontrollerslab.com/esp32-web-server-dc-motor-speed-l298n-driver/esp32-with-dc-motor-and-l298n-connection-diagram/#main" data-orig-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-with-DC-Motor-and-L298N-connection-diagram.jpg" data-orig-size="1067,751" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;User&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1638803416&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="ESP32 with DC Motor and L298N connection diagram" data-image-description="" data-image-caption="" data-medium-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-with-DC-Motor-and-L298N-connection-diagram.jpg" data-large-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-with-DC-Motor-and-L298N-connection-diagram.jpg" decoding="async" loading="lazy" width="1067" src="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-with-DC-Motor-and-L298N-connection-diagram.jpg" alt="ESP32 with DC Motor and L298N connection diagram" class="wp-image-28562" srcset="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-with-DC-Motor-and-L298N-connection-diagram.jpg 1067w, https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP32-with-DC-Motor-and-L298N-connection-diagram-768x541.jpg 768w" sizes="(max-width: 1067px) 100vw, 1067px" style="height: auto; max-width: 100%; vertical-align: bottom; box-sizing: border-box;" />
      <figcaption style="display: table-caption; margin-top: 0.5em; margin-bottom: 1em; font-size: 13px; caption-side: bottom;">ESP32 with L298N Motor Driver and DC Motor connection diagram</figcaption>
      </figure>
   </div>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">We will be using motor A output pins to control this motor. Thus, ENA will set the speed and IN1 and IN2 will set the spinning direction of the motor.</p>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">In&nbsp;<a href="https://microcontrollerslab.com/esp32-pinout-use-gpio-pins/" target="_blank" rel="noreferrer noopener" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;">ESP32</a>, PWM is supported through all output pins GPIO only. So choose an GPIO pin to connect with the enable pin of the L298N motor driver. We have used GPIO13 as the PWM pin. In the above schematic, we can see that GPIO13 is connected with ENA, and IN1 and IN2 are connected with GPIO5 and GPIO4 respectively.</p>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">You can choose appropriate GPIO pins when connecting the ESP32 board and the driver module together.</p>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">The dc motor is rated at 6-12V, and requires a large amount of current to start. This is why we will be using an external power source for the dc motor. As we can use any power source ranging from 6-12V, we will incorporate a 9V battery in our case. You can use any other power source.</p>
<div class="code-block code-block-1" style="border: 0px; margin: 8px auto; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff; text-align: center; clear: both;">
   <div class="adsbyvli" data-ad-slot="vi_534064800" data-id="vi_534064800_4" style="border: 0px; padding: 0px; margin: 0px auto !important; width: 300px !important; height: initial !important; visibility: visible !important; opacity: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 250px !important;"><vli id="container_vi_534064800_4" style="visibility: visible; display: block !important; position: relative !important; margin: 0px auto !important;"><vli id="vi_534064800_4" data-google-query-id="CMqj89Kktf0CFVvvTAIduBgBFg" style="visibility: visible;">
            <div id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_14__container__" style="border: 0pt none; margin: 0px; padding: 0px; display: inline-block; width: 300px; height: 250px;"><iframe frameborder="0" src="https://ea451a009d08f52b698c908741af5925.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html" id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_14" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="g" data-load-complete="true" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; max-width: 100%; vertical-align: bottom;"></iframe></div>
            </vli></vli></div>
   </div>
<div class="wp-block-image" style="border: 0px; margin: 0px 0px 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <figure class="aligncenter size-full" style="margin: 0px auto; display: table; clear: both; max-width: 100%; height: auto; text-align: center;"><img data-attachment-id="28569" data-permalink="https://microcontrollerslab.com/esp32-web-server-dc-motor-speed-l298n-driver/esp-dc-motor-speed-control-web-server-hardware/#main" data-orig-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP-DC-Motor-Speed-Control-Web-Server-hardware.jpg" data-orig-size="1104,616" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;User&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;1638815496&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="ESP DC Motor Speed Control Web Server hardware" data-image-description="" data-image-caption="" data-medium-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP-DC-Motor-Speed-Control-Web-Server-hardware.jpg" data-large-file="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP-DC-Motor-Speed-Control-Web-Server-hardware.jpg" decoding="async" loading="lazy" width="1104" src="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP-DC-Motor-Speed-Control-Web-Server-hardware.jpg" alt="ESP DC Motor Speed Control Web Server hardware" class="wp-image-28569" srcset="https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP-DC-Motor-Speed-Control-Web-Server-hardware.jpg 1104w, https://microcontrollerslab.com/wp-content/uploads/2021/12/ESP-DC-Motor-Speed-Control-Web-Server-hardware-768x429.jpg 768w" sizes="(max-width: 1104px) 100vw, 1104px" style="height: auto; max-width: 100%; vertical-align: bottom; box-sizing: border-box;" /></figure>
   </div>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">You can also read this in-depth guide:</p>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;"><a href="https://microcontrollerslab.com/l298n-dc-motor-driver-module-esp32-tutorial/" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">Interface L298N DC Motor Driver Module with ESP32</a></li>
   </ul>
<h2 id="h-setting-up-arduino-ide-for-esp32-pwm-slider-web-server" style="border: 0px; margin: 0px 0px 6px; padding: 0px; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 30px; line-height: 1.2em; color: #262626; background-color: #ffffff;">Setting up Arduino IDE for ESP32 PWM Slider Web Server</h2>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">We will use Arduino IDE to program our ESP32 development board. Thus, you should have the latest version of Arduino IDE. Additionally, you also need to install the ESP32 plugin. You can visit the link shown below to have a look.</p>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;">&nbsp;<a href="https://microcontrollerslab.com/install-esp32-arduino-ide/" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">Installing ESP32 library in Arduino IDE and upload code.</a></li>
   </ul>
<h3 id="h-installing-espasyncwebserver-library-and-async-tcp-library" style="border: 0px; margin: 0px 0px 16px; padding: 0px; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 25px; line-height: 1.2em; color: #0c0c0c; background-color: #ffffff;">Installing ESPAsyncWebServer Library and Async TCP Library</h3>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">We will need two libraries to build our ESP32 web server.</p>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;">ESPAsyncWebServer</li>
   <li style="border: 0px; margin: 0px; padding: 0px;">AsyncTCP</li>
   </ul>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">The ESPAsyncWebServer library will help us in creating our web server easily. With this library, we will set up an asynchronous HTTP server. AsyncTCP library will also be incorporated as it a dependency for the ESPAsyncWebServer library. All of these libraries are not available in the Arduino library manager. Therefore, we will have to download and load them on our ESP32 board ourselves.</p>
<div class="code-block code-block-1" style="border: 0px; margin: 8px auto; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff; text-align: center; clear: both;">
   <div class="adsbyvli" data-ad-slot="vi_534064800" data-id="vi_534064800_5" style="border: 0px; padding: 0px; margin: 0px auto !important; width: 300px !important; height: initial !important; visibility: visible !important; opacity: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 250px !important;"><vli id="container_vi_534064800_5" style="visibility: visible; display: block !important; position: relative !important; margin: 0px auto !important;"><vli id="vi_534064800_5" data-google-query-id="CKCSx9iktf0CFVlqiwodw48Byg" style="visibility: visible;">
            <div id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_16__container__" style="border: 0pt none; margin: 0px; padding: 0px; display: inline-block; width: 300px; height: 250px;"><iframe frameborder="0" src="https://ea451a009d08f52b698c908741af5925.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html" id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_16" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="i" data-load-complete="true" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; max-width: 100%; vertical-align: bottom;"></iframe></div>
            </vli></vli></div>
   </div>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;">To install the ESPAsyncWebServer library for free,&nbsp;<a href="https://github.com/me-no-dev/ESPAsyncWebServer/archive/master.zip" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">click here to download.</a>&nbsp;You will download the library as a .zip folder which you will extract and rename as ‘ESPAsyncWebServer.’ Then, transfer this folder to the installation library folder in your Arduino IDE.</li>
   <li style="border: 0px; margin: 0px; padding: 0px;">To install the Async TCP library for free,&nbsp;<a href="https://github.com/me-no-dev/AsyncTCP/archive/master.zip" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">click here to download</a>. You will download the library as a .zip folder which you will extract and rename as ‘AsyncTCP.’ Then, transfer this folder to the installation library folder in your Arduino IDE.</li>
   </ul>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">Likewise, you can also go to&nbsp;<span style="border: 0px; margin: 0px; padding: 0px; font-weight: 700;">Sketch &gt; Include Library &gt; Add .zip</span>&nbsp;Library inside the IDE to add the libraries as well. After installation of the libraries, restart your IDE.</p>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">You can read about ESP32 asynchronous web server here:</p>
<ul style="box-sizing: border-box; border: 0px; margin: 0px 0px 1.5em 3em; padding: 0px; list-style-position: initial; list-style-image: initial; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">
   <li style="border: 0px; margin: 0px; padding: 0px;"><a href="https://microcontrollerslab.com/esp32-server-sent-events-sse-web-server-arduino-ide/" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">ESP32 Server-Sent Events (SSE) Web Server (Arduino IDE)</a></li>
   <li style="border: 0px; margin: 0px; padding: 0px;"><a href="https://microcontrollerslab.com/esp32-asynchronous-web-server-espasyncwebserver-library/" style="border: 0px; margin: 0px; padding: 0px; background-color: transparent; transition: color 0.1s ease-in-out 0s, background-color 0.1s ease-in-out 0s; text-decoration-line: none; color: #1b78e2;" target="_blank">ESP32 Asynchronous Web Server using Arduino IDE and ESPAsyncWebServer library</a></li>
   </ul>
<h2 id="h-arduino-sketch-esp32-pwm-slider-web-server" style="border: 0px; margin: 0px 0px 6px; padding: 0px; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 30px; line-height: 1.2em; color: #262626; background-color: #ffffff;">Arduino Sketch : ESP32 PWM Slider Web Server</h2>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">Open your Arduino IDE and go to&nbsp;<span style="border: 0px; margin: 0px; padding: 0px; font-weight: 700;">File &gt; New.</span>&nbsp;A new file will open. Copy the code given below in that file and save it.</p>
<p style="border: 0px; margin-bottom: 1.5em; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff;">Remember to replace the network credentials.</p>
<div class="code-block code-block-1" style="border: 0px; margin: 8px auto; padding: 0px; color: #3a3a3a; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 17px; background-color: #ffffff; text-align: center; clear: both;">
   <div class="adsbyvli" data-ad-slot="vi_534064800" data-id="vi_534064800_6" style="border: 0px; padding: 0px; margin: 0px auto !important; width: 300px !important; height: initial !important; visibility: visible !important; opacity: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; min-height: 250px !important;"><vli id="container_vi_534064800_6" style="visibility: visible; display: block !important; position: relative !important; margin: 0px auto !important;"><vli id="vi_534064800_6" data-google-query-id="CIX1nNuktf0CFYYbYAod7XwFGQ" style="visibility: visible;">
            <div id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_17__container__" style="border: 0pt none; margin: 0px; padding: 0px; display: inline-block; width: 300px; height: 250px;"><iframe frameborder="0" src="https://ea451a009d08f52b698c908741af5925.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html" id="google_ads_iframe_/21724377464,22649319876/5340_Microcontrollerslab.com/5340_Microcontrollerslab.com_1_17" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="j" data-load-complete="true" style="border-width: 0px; border-style: initial; margin: 0px; padding: 0px; max-width: 100%; vertical-align: bottom;"></iframe></div>
            </vli></vli></div>
   </div>
<pre class="wp-block-code  language-c" style="border: 0px; margin-top: 0.5em; margin-bottom: 1.5em; padding: 1em; background: rgb(245, 242, 240); font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; font-size: 0.95em; line-height: 1.5; overflow: auto; max-width: 100%; box-sizing: border-box; text-shadow: white 0px 1px; word-break: normal; overflow-wrap: normal; tab-size: 4; hyphens: none;">
   <code class=" language-c" style="border: 0px; margin: 0px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 0.95em; line-height: 1.5; font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; display: block; overflow-wrap: normal; background: none; text-shadow: white 0px 1px; word-spacing: normal; word-break: normal; tab-size: 4; hyphens: none;"><span class="token macro property" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">#<span class="token directive keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">include</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">&lt;WiFi.h&gt;</span></span><span class="token macro property" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">#<span class="token directive keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">include</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">&lt;AsyncTCP.h&gt;</span></span><span class="token macro property" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">#<span class="token directive keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">include</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">&lt;ESPAsyncWebServer.h&gt;</span></span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">char</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">*</span> ssid <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"Your_SSID"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">char</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">*</span> password <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"Your_Password"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">int</span> ENA_pin <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">13</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">int</span> IN1 <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">5</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">int</span> IN2 <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">4</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span>
String slider_value <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"0"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">int</span> frequency <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">500</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">int</span> pwm_channel <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">0</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">int</span> resolution <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">8</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">char</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">*</span> input_parameter <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"value"</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span>
AsyncWebServer <span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">server</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">80</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">)</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">const</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">char</span> index_html<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">[</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">]</span> PROGMEM <span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span> R"<span class="token function" style="border: 0px; margin: 0px; padding: 0px; color: #dd4a68;">rawliteral</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">(</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">!</span>DOCTYPE HTML<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>html<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>head<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>meta name<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"viewport"</span> content<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">=</span><span class="token string" style="border: 0px; margin: 0px; padding: 0px; color: #669900;">"width=device-width, initial-scale=1"</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>title<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span>DC Motor Speed Control Web Server<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>title<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span>style<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span>
    html <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>font<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>family<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> Times New Roman<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> display<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">inline</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>block<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> text<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>align<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> center<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span>
    h2 <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>font<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>size<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">2.3</span>rem<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span>
    p <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>font<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>size<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">2.0</span>rem<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span>
    body <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span>max<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>width<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">400</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> margin<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">0</span>px <span class="token keyword" style="border: 0px; margin: 0px; padding: 0px; color: #0077aa;">auto</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> padding<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>bottom<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">25</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>slider <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>webkit<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>appearance<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> none<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> margin<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">14</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> width<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">360</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> height<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">25</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> background<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> #<span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">4000ff</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span>
      outline<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> none<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>webkit<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>transition<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">.2</span>s<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> transition<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> opacity <span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">.2</span>s<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>slider<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">::</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>webkit<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>slider<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>thumb <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>webkit<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>appearance<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> none<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> appearance<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> none<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> width<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">35</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> height<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">35</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> background<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span>#<span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">01070</span>a<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> cursor<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> pointer<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">.</span>slider<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">::</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>moz<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>range<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">-</span>thumb <span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">{</span> width<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">35</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> height<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span><span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">35</span>px<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> background<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> #<span class="token number" style="border: 0px; margin: 0px; padding: 0px; color: #990055;">01070</span>a<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span> cursor<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">:</span> pointer<span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">;</span><span class="token punctuation" style="border: 0px; margin: 0px; padding: 0px; color: #999999;">}</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">/</span>style<span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&gt;</span><span class="token operator" style="border: 0px; margin: 0px; padding: 0px; color: #9a6e3a; background: rgba(255, 255, 255, 0.5);">&lt;</span></code>
   </pre>