Adding interactive elements in html web page to pickup color-CodePudding

I'm not a web developer, I'm an electronic developer and trying to develop a simple webpage to pickup color with 3 sliders, a sample box and a button.

The whole idea is to move the sliders until you get the color you need; that color is visible in a sample box which is a rectangle next to the "send button" and this box change with the color selected by the sliders.

I manage to create the custom sliders but now I need the button that sends the 3 slider values and the "onSliderChange" action that update the sample box color.

This page will be inserted in an ESP8266 Arduino project to control an RGB LED.

Here's my code until now.

.slidecontainer {
  width: 100%;
}

.rSlider {
  -webkit-appearance: none;
  width: 50%;
  height: 15px;
  background: #FF0000;
  outline: 1;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.rSlider:hover {
  opacity: 1;
}

.rSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.rSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.gSlider {
  -webkit-appearance: none;
  width: 50%;
  height: 15px;
  background: #00FF00;
  outline: 1;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.gSlider:hover {
  opacity: 1;
}

.gSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.gSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.bSlider {
  -webkit-appearance: none;
  width: 50%;
  height: 15px;
  background: #0000FF;
  outline: 1;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.bSlider:hover {
  opacity: 1;
}

.bSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.bSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

<h1>Custom Range Slider</h1>

<div >

  <p>Custom range slider:</p>
  <a>R</a><input type="range" min="0" max="255" value="50"  id="rRange">
  <br><br>
  <a>G</a><input type="range" min="0" max="255" value="50"  id="gRange">
  <br><br>
  <a>B</a><input type="range" min="0" max="255" value="50"  id="bRange">
  <br><br>

</div>

CodePudding user response：

....or you could just eliminate all of that and use just a single <input type="color">:

It's very widely supported https://caniuse.com/input-color - except for Opera Mini and KaiOS' Browser, both of which target ultra-low-end phones - I don't personally know anyone with a phone running Opera Mini nor KaiOS; I haven't even seen anyone running Java (excepting Android) on a phone in over 12 years.

#slidecontainer {
  outline: 1px solid black;
  display: flex;
  justify-content: center;
  padding: 2em;
}

<h1>Custom Range Slider</h1>

<div id="slidecontainer">

    <label>
        Click me
        <br />
        <input
            type="color"
            value="#123456"
            id="colorInput" 
            oninput="this.closest('div').style.backgroundColor = this.value;"
        />

    </label>
</div>