Sorry, I was wrong. You have to change more than only one line in script.js.
These two functions have to look like this:

function updateSliderPWM(element) {
var sliderNumber = element.id.charAt(element.id.length-1);
var sliderValue = document.getElementById(element.id).value;
var slNumHexStrg = sliderNumber.toString(16).toUpperCase();

document.getElementById("sliderValue" + slNumHexStrg).innerHTML = sliderValue;
websocket.send(slNumHexStrg + "s" + sliderValue.toString());


}

function onMessage(event) {
var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj);

for (var i = 0; i < keys.length; i++){
var key = keys[i];

document.getElementById(key).innerHTML = myObj[key];
document.getElementById("slider" + i.toString(16).toUpperCase()).value = myObj[key];
}


}

Hi,
I have made it this way (in .ino file):

(C++, adruino file)
if (message.indexOf(“sliderReds”) >= 0) {
sliderRedValue = message.substring(sizeof(“sliderReds”) – 1);
…rest of code…
}

(script.js file)
function updateSlider(element) {
var id = element.id;
var sliderValue = document.getElementById(id).value;
document.getElementById(id).innerHTML = sliderValue;
websocket.send(id+”s”+sliderValue.toString());
}
function onMessage(event) {
var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj);
var values = Object.values(myObj);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
document.getElementById(key.slice(0, key.length-5)).value = myObj[key];
}
}

My sliders IDs are “sliderRed”, “sliderGreen” and so on and then I am sending this ID with “s” and value (it may be even without letter “s” between ID and value) to ESP8266. On ESP8266 with usage of code above you cut substring from the index after “s” in “sliderReds” to the end (where value should be).

I kinda gave the same problem as above but need to go to 24 sliders or even more is there a solution for tied for hours but my knowledge is lacking

kind regards martin

Hi,
if the intended range slider1 … slider9 is not sufficient, it can actually be extended by hexadecimal notation to slider0 … sliderF. To do this, however, line 49 in script.js must be changed as follows:
document.getElementById(“slider “+ (i).toString(16)).value = myObj[key];
Regards,
Larsemann

Have you tried doing it in hex?

Great!.
I’m glad the issue is fixed now.
Regards,
Sara

I FOUND THE ISSUE! I checked the file sizes from the .zip you provided and the ones in my sketch data folder and discovered I had pasted over the .js with the text from the .css. Problem solved! Thanks so much for this very fun project. I look forward to many more!!!!

here are the files in the data folder of the sketch. I am assuming the script.js move over to the esp8266 since index.html displays with the correct style sheet and displays correctly on both browser and mobile. Is there a way to display the files on the MCU?

01/29/2023 05:25 PM 1,796 index.html
01/29/2023 05:30 PM 2,966 script.js
01/29/2023 05:29 PM 1,482 style.css

Hi.
Please double-check that you’ve created and uploaded all the required files to the board, including the Javascript file.
Regards,
Sara