![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP8266-Multiple-Sliders-Web-Server-PWM-LEDs.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nYou can also modify the code presented in this tutorial to add sliders to your projects to set threshold values or any other values you need to use in your code.<\/p>\n\n\n\n
For this project, the ESP8266 board will be programmed using the Arduino core. You can either use the Arduino IDE<\/a>, VS Code with PlatformIO<\/a>, or any other suitable IDE.<\/p>\n\n\n\n To better understand how this project works, we recommend taking a look at the following tutorials:<\/p>\n\n\n\n * This project shows how to build a web server with one slider, but it uses HTTP requests\u2014in this tutorial, we’ll use WebSocket protocol.<\/p>\n\n\n\n We have a similar tutorial for the ESP32 board:<\/p>\n\n\n\n The following image shows the web page we’ll build for this project:<\/p>\n\n\n Before proceeding with this tutorial, make sure you check all the following prerequisites.<\/p>\n\n\n\n To follow this project you need:<\/p>\n\n\n\n You don’t need three LEDs to test this project, you can simply see the results in the Serial Monitor or use other actuators that required a PWM signal to operate.<\/p>\n\n\n You can use the preceding links or go directly to MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p> We\u2019ll program the ESP8266 using Arduino IDE. So, you must have the ESP8266 add-on installed. Follow the next tutorial if you haven\u2019t already:<\/p>\n\n\n\n If you want to use VS Code with the PlatformIO extension, follow the next tutorial instead to learn how to program the ESP8266:<\/p>\n\n\n\n To upload the HTML, CSS, and JavaScript files needed to build this project to the ESP8266 flash memory (LittleFS), we\u2019ll use a plugin for Arduino IDE: LittleFS Filesystem uploader<\/strong>. Follow the next tutorial to install the filesystem uploader plugin if you haven’t already:<\/p>\n\n\n\n If you\u2019re using VS Code with the PlatformIO extension, read the following tutorial to learn how to upload files to the filesystem:<\/p>\n\n\n\n To build this project, you need to install the following libraries:<\/p>\n\n\n\n You can install these libraries using the Arduino Library Manager. Go to Sketch <\/strong>> Include Library<\/strong> > Manage Libraries<\/strong> and search for the libraries’ names.<\/p>\n\n\n\n Wire three LEDs to the ESP8266. We’re using GPIOs 12 (D6), 13 (D7), and 14 (D5). You can use any other suitable GPIOs.<\/p>\n\n\n Recommended reading: ESP8266 Pinout Reference: Which GPIO pins should you use?<\/a><\/p>\n\n\n\n To keep the project organized and make it easier to understand, we\u2019ll create four files to build the web server:<\/p>\n\n\n\n You should save the HTML, CSS, and JavaScript files inside a folder called data<\/strong> <\/em>inside the Arduino sketch folder, as shown in the previous diagram. We\u2019ll upload these files to the ESP8266 filesystem (LittleFS).<\/p>\n\n\n\n You can download all project files:<\/strong><\/p>\n\n\n\n Copy the following to the index.html<\/span> file.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let’s take a quick look at the most relevant parts of the HTML file.<\/p>\n\n\n\n The following tags create the card for the first slider (Fader 1).<\/p>\n\n\n\n The first paragraph displays a title for the card (Fader 1<\/span>). You can change the text to whatever you want.<\/p>\n\n\n\n To create a slider in HTML you use the <input><\/span><\/span> tag. The <input><\/span><\/span> tag specifies a field where the user can enter data.<\/p>\n\n\n\n There are a wide variety of input types. To define a slider, use the type<\/span> attribute with the range<\/span> value. In a slider, you also need to define the minimum and the maximum range using the min<\/span> and max<\/span> attributes (in this case, 0<\/span> and 100<\/span>, respectively).<\/p>\n\n\n\n You also need to define other attributes like:<\/p>\n\n\n\n The slider is inside a paragraph with the switch<\/span> class name. So, here are the tags that actually create the slider.<\/p>\n\n\n\n Finally, there\u2019s a paragraph with a <span><\/span><\/span> tag, so that we can insert the current slider value in that paragraph by referring to its id (id=”sliderValue1″<\/span>).<\/p>\n\n\n\n To create more sliders, you need to copy all the HTML tags that create the complete card. First, however, you need to consider that you need a unique id for each slider and slider value. In our case, we have three sliders with the following ids: slider1<\/span>, slider2<\/span>, slider3<\/span>, and three placeholders for the slider value with the following ids: sliderValue1<\/span>, sliderValue2<\/span>, sliderValue3<\/span>.<\/p>\n\n\n\n For example, here’s the card for slider number 2.<\/p>\n\n\n\n Copy the following to the style.css<\/span> file.<\/p>\n\n\n View raw code<\/a><\/p>\n\n\n\n Let’s take a quick look at the relevant parts of the CSS file that style the slider. In this example, we need to use the vendor prefixes for the appearance<\/span> attribute.<\/p>\n\n\n\n Vendor Prefixes<\/strong><\/p>\n\n\n\n Vendor prefixes allow a browser to support new CSS features before they become fully supported. The most commonly used browsers use the following prefixes:<\/p>\n\n\n\n\n
\n
Project Overview<\/h2>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP-Multiple-Sliders-Web-Server.png?resize=745%2C388&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
How does it work?<\/h3>\n\n\n\n
\n
\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP8266-Web-Server-Sliders-How-It-Works.png?resize=851%2C326&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP8266-Slider-Web-Server-Notify-All-Clients-Websocket.png?resize=751%2C703&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP32-Brightness-Duty-Cycle-Web-Server_Brightness-duty-cycle.png?resize=865%2C441&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP8266-Multiple-Sliders-Web-Server-New-Client-Update-Values.png?resize=751%2C210&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nPrerequisites<\/h2>\n\n\n\n
1) Parts Required<\/h3>\n\n\n\n
\n
![](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&quality=100&strip=all&ssl=1\")
<\/a><\/p>\n\n\n\n2) Arduino IDE and ESP8266 Boards Add-on<\/h3>\n\n\n\n
\n
\n
3) Filesystem Uploader Plugin<\/h3>\n\n\n\n
\n
\n
4) Libraries<\/h3>\n\n\n\n
\n
Schematic Diagram<\/h2>\n\n\n\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP8266-three-LEDs-schematic-diagram.png?resize=570%2C778&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nOrganizing Your Files<\/h2>\n\n\n\n
\n
![\"ESP8266](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2021\/05\/ESP8266-Organizing-Folders_organizing-files.png?resize=601%2C358&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
HTML File<\/h2>\n\n\n\n
<!-- Complete project details: https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-web-server-websocket-sliders\/ -->\r\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>ESP IOT DASHBOARD<\/title>\r\n <meta name="viewport" content="width=device-width, initial-scale=1">\r\n <link rel="icon" type="image\/png" href="favicon.png">\r\n <link rel="stylesheet" type="text\/css" href="style.css">\r\n<\/head>\r\n<body>\r\n <div class="topnav">\r\n <h1>Multiple Sliders<\/h1>\r\n <\/div>\r\n <div class="content">\r\n <div class="card-grid">\r\n <div class="card">\r\n <p class="card-title">Fader 1<\/p>\r\n <p class="switch">\r\n <input type="range" onchange="updateSliderPWM(this)" id="slider1" min="0" max="100" step="1" value ="0" class="slider">\r\n <\/p>\r\n <p class="state">Brightness: <span id="sliderValue1"><\/span> %<\/p>\r\n <\/div>\r\n <div class="card">\r\n <p class="card-title"> Fader 2<\/p>\r\n <p class="switch">\r\n <input type="range" onchange="updateSliderPWM(this)" id="slider2" min="0" max="100" step="1" value ="0" class="slider">\r\n <\/p>\r\n <p class="state">Brightness: <span id="sliderValue2"><\/span> %<\/p>\r\n <\/div>\r\n <div class="card">\r\n <p class="card-title"> Fader 3<\/p>\r\n <p class="switch">\r\n <input type="range" onchange="updateSliderPWM(this)" id="slider3" min="0" max="100" step="1" value ="0" class="slider">\r\n <\/p>\r\n <p class="state">Brightness: <span id="sliderValue3"><\/span> %<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <script src="script.js"><\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n\tCreating a Slider<\/h3>\n\n\n\n
<div class=\"card\">\n <p class=\"card-title\">Fader 1<\/p>\n <p class=\"switch\">\n <input type=\"range\" onchange=\"updateSliderPWM(this)\" id=\"slider1\" min=\"0\" max=\"100\" step=\"1\" value =\"0\" class=\"slider\">\n <\/p>\n <p class=\"state\">Brightness: <span id=\"sliderValue1\"><\/span> %<\/p>\n<\/div><\/code><\/pre>\n\n\n\n<p class=\"card-title\">Fader 1<\/p><\/code><\/pre>\n\n\n\n\n
<p class=\"switch\">\n <input type=\"range\" onchange=\"updateSliderPWM(this)\" id=\"slider1\" min=\"0\" max=\"100\" step=\"1\" value =\"0\" class=\"slider\">\n<\/p><\/code><\/pre>\n\n\n\n<p class=\"state\">Brightness: <span id=\"sliderValue1\"><\/span> %<\/p><\/code><\/pre>\n\n\n\nCreating More Sliders<\/h3>\n\n\n\n
<div class=\"card\">\n <p class=\"card-title\"> Fader 2<\/p>\n <p class=\"switch\">\n <input type=\"range\" onchange=\"updateSliderPWM(this)\" id=\"slider2\" min=\"0\" max=\"100\" step=\"1\" value =\"0\" class=\"slider\">\n <\/p>\n <p class=\"state\">Brightness: <span id=\"sliderValue2\"><\/span> %<\/p>\n<\/div><\/code><\/pre>\n\n\n\nCSS File<\/h2>\n\n\n\n
\/* Complete project details: https:\/\/randomnerdtutorials.com\/esp8266-nodemcu-web-server-websocket-sliders\/ *\/\r\n\r\nhtml {\r\n font-family: Arial, Helvetica, sans-serif;\r\n display: inline-block;\r\n text-align: center;\r\n }\r\n h1 {\r\n font-size: 1.8rem;\r\n color: white;\r\n }\r\n p {\r\n font-size: 1.4rem;\r\n }\r\n .topnav {\r\n overflow: hidden;\r\n background-color: #0A1128;\r\n }\r\n body {\r\n margin: 0;\r\n }\r\n .content {\r\n padding: 30px;\r\n }\r\n .card-grid {\r\n max-width: 700px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-gap: 2rem;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n }\r\n .card {\r\n background-color: white;\r\n box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);\r\n }\r\n .card-title {\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #034078\r\n }\r\n .state {\r\n font-size: 1.2rem;\r\n color:#1282A2;\r\n }\r\n .slider {\r\n -webkit-appearance: none;\r\n margin: 0 auto;\r\n width: 100%;\r\n height: 15px;\r\n border-radius: 10px;\r\n background: #FFD65C;\r\n outline: none;\r\n }\r\n .slider::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n background: #034078;\r\n cursor: pointer;\r\n }\r\n .slider::-moz-range-thumb {\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50% ;\r\n background: #034078;\r\n cursor: pointer;\r\n }\r\n .switch {\r\n padding-left: 5%;\r\n padding-right: 5%;\r\n }\r\n<\/code><\/pre>\n\t.slider {\n -webkit-appearance: none;\n margin: 0 auto;\n width: 100%;\n height: 15px;\n border-radius: 10px;\n background: #FFD65C;\n outline: none;\n}\n.slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: #034078;\n cursor: pointer;\n}\n.slider::-moz-range-thumb {\n width: 30px;\n height: 30px;\n border-radius: 50% ;\n background: #034078;\n cursor: pointer;\n}\n.switch {\n padding-left: 5%;\n padding-right: 5%;\n}<\/code><\/pre>\n\n\n\n\n