I have put together some code in HTML and have a Color picker, that is working perfect. I also put in a some code and create a slider bar to try and control the brightness of the selected color. The problem is when I choose a color the slider bar wont change the brightness of the selected color. How do I connect the slider value to my color brightness? I will put my code for the slider and color picker below. Please let me know if anyone can help. Thank you -Austin
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");
client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");
client.println("</head><body>");
client.println("<form>");
client.println("<hr>");
client.println("<section class=intensity>");
client.println("<label for=intensity>Light Brightness");
client.println("<br>");
client.println("<span>Dim</span>");
client.println("<input id=intensity type=range name=Dim min=0 max=255 step=1>");
client.println("<span>Bright</span>");
client.println("</section>");
client.println("</form>");
client.println("<div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");
client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");
client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");
client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");
//client.println("<script>function update(intensity)");
client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" + Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + intensity + \"&\";}</script></body></html>");
