Hi.

In your code, there are two LEDs. But you have both LEDs attached to the same channel. This means, that when you change the duty cycle for one LED it will also change for the other. Is this what you want to do?

For the getCurrentValue, you can either modify the Arduino sketch to send a JSON variable with the current value of both sliders. Or you can add another function that requests the current value of the seconds slider.

For example, let’s create a getCurrentValue4() function like this in the JS file:

function getCurrentValue4() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("pwmSlider4").value = this.responseText;
    document.getElementById("textSliderValue4").innerHTML = this.responseText;
  }
};
  xhr.open("GET", "/currentValue4", true);
  xhr.send();
}

This function makes a request on the ESP32 /currentValue4 path and handles the responses. It puts the response on the HTML element with the “textSliderValue4” id.
Then, call this function on the onload event like this:

function onload(event) {
  initWebSocket();
  getCurrentValue();
  getCurrentValue4();
}

This will make two requests to the ESP32 when the page loads. One on the /currentValue path and another on the /currentValue4 path.

Now, you need to handle what happens on the ESP32 when it receives that request. So, in your main.cpp file, add the following (which you already have):

server.on("/currentValue4", HTTP_GET, [](AsyncWebServerRequest *request) {
  request->send(200, "/text/plain", String(sliderValue4).c_str());
});

And it should be it.

I hope this is clear.

Regards,
Sara