problem in the html.h code of my arduino code

hello everyone and thank you in advance for your help.
here I want to control two LEDs via pin PWM of my nodemcu by web page. my problem I can not control the two LEDs separately. I know that I have a problem in the html code exactly in the java part. here is the code, I ask this question because I need this project. thanks for the help

slider.h (2.06 KB)

control_2_slider_nodemcu.ino (2.62 KB)

Here is the Java code sorted, tested on Tryit Editor v3.6
Just paste the code into it run window…

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
</style>
</head>
<body>

<h1>Round Range Slider</h1>

<div class="slidecontainer">
  <input type="range" min="0" max="1023" value="500" class="slider" id="myRange1">
  <p>Value: <span id="demo1"></span></p>
</div>

<div class="slidecontainer2">
  <input type="range" min="0" max="1023" value="500" class="slider" id="myRange2">
  <p>Value: <span id="demo2"></span></p>
</div>
  
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>


<script>
var slider = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
output1.innerHTML = slider.value;

var slider2 = document.getElementById("myRange2");
var output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;

slider.oninput = function() 
{
  output1.innerHTML = slider.value;
  pwm1_change(slider.value);
}

slider2.oninput = function() 
{ 
  output2.innerHTML = slider2.value;
  pwm2_change(slider2.value);
}

function pwm1_change(val) 
{
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "setPWM?PWMval1="+val, true);
  xhttp.send();
}

function pwm2_change(val) 
{
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "setPWM?PWMval2="+val, true);
  xhttp.send();
}
</script>

</body>
</html>
</html>

yes i know it works on html, but it doesn't work with arduino

don’t do this

 String root_code = html_page;                     // html code from .h file
 server.send(200, "text/html", root_code);

use this instead

  server.send_P(200, "text/html", html_page, sizeof(html_page));

you will stay from stack size errors when your html code goes ‘bigger’ ( with more scripts)

when i type my ip address
I have the two cursor with value 500, when I move the 1st cursor the variation is done most normally, if I touch slider 2 the value of the 1st cursor is canceled, I want the two values indepondamnet

kamelyali: when i type my ip address I have the two cursor with value 500, when I move the 1st cursor the variation is done most normally, if I touch slider 2 the value of the 1st cursor is canceled, I want the two values indepondamnet

doing this

 server.on("/setPWM", handle_pwm1); // handles the PWM values
 server.on("/setPWM", handle_pwm2); // handles the PWM values

means the second line will never be invoked/called, you need to use different names for the paths like

 server.on("/setPWM1", handle_pwm1);    // handles the PWM values
 server.on("/setPWM2", handle_pwm2);  // handles the PWM values

well you need to make changes in your JS accordingly

thank you very much for your help my problem is solved