develop a touch interface to provide control over the brightness of various displays on a control surface. Guide me pls

This is how I would go about doing this:

• Create a jQuery range slider from 0-100 (Like this for example: https://andreruffert.github.io/rangeslider.js/ )
• Create a default screen for value 50%.
• Overlay a div with white background over this screen.
• Overlay a div with black background also over this screen.
• When the range slider is at 50% set both overlays opacity to 0%.
• For every unit under 50% adjust the opacity of the black overlay by 2% (so for example if the range slider is 40% set the black overlay to 20% opacity).
• Vice versa for the white overlay, increase the opacity by 2% for every 1% the range slider goes over 50%.
• onClick button that sets the values of the black overlay to 100% for sleep mode will make the screen go completely black.

The above example goes from complete white to black in brightness, but you can adjust the values if you only want it to dim and brighten by for example only increasing the opacity by 1% or less for each 1% above and below 50%, meaning that the overlays will never go to 100% causing complete black or white.

You could go even further and add a screensaver overlay that triggers if no user input has been detected within a set amount of time.

There are many different ways you could go about this, for example if you had a black background screen you could effect the brightness of the font by using RGB color. For example:

p {
   color: rgb(0,255,0);
}

The above would output green font, you could adjust the brightness of the green by adjusting the red and blue value in uniform.

The following is a brighter green.

p {
   color: rgb(100,255,100);
}

The following would be full brightness to white.

p {
   color: rgb(255,255,255);
}

and if you want to make the green darker you can just reduce the green value and leave the red and blue at 0.

Hope this helps :)