JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<input type="range" id="red" value="0" min="0" max="255" />
    <input type="number" id="redField" value="0" min="0" max="255" ><br/>
    
    <input type="range" id="green" value="0" min="0" max="255" /> 
    <input type="number" id="greenField" value="0" min="0" max="255" ><br/>
    
    <input type="range" id="blue" value="0" min="0" max="255" />
    <input type="number" id="blueField" value="0" min="0" max="255" ><br/>
    
    <div id="box"> </div>
    <p id="field"></p>
    <p id="field2"></p>

CSS

input {
    
    margin-bottom: 10px;
}
#box {
    width: 255px;
    height: 100px;
    background-color:black;
}
input[type=range] {
    width: 250px;
    -webkit-appearance: none;
    height: 1px;
    background-color: lightgrey;
    cursor: pointer;
    transition: all 0.2s ease;
    //border: 1px solid lightgrey;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: white;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    transition: all 0.2s ease;
}
//input[type=range]:hover {    border: 1px solid rgba(0, 0, 0, 0);}

input[type=range]:hover::-webkit-slider-thumb{
    width: 14px;
    height: 14px;
    border-radius: 10px;
    box-shadow: 0 0 0 2px white;
}
input[type=range]:focus {
    outline: none;
}
#red::-webkit-slider-thumb {
    border: 1px solid red;
}
#red:hover{
    background-color: red;
}

 #green::-webkit-slider-thumb {
    border: 1px solid green;
}
#green:hover{
    background-color: green;
}

 #blue::-webkit-slider-thumb {
    border: 1px solid blue;
}
#blue:hover{
    background-color: blue;
}

JavaScript

document.getElementById("red").addEventListener("mousemove", forRange);
document.getElementById("green").addEventListener("mousemove", forRange);
document.getElementById("blue").addEventListener("mousemove", forRange);

document.getElementById("redField").addEventListener("wheel", forInput);
    
function forRange() {
var r = document.getElementById("red").value,
	g = document.getElementById("green").value,
    b = document.getElementById("blue").value;
    
    document.getElementById("box").style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
    
    document.getElementById("redField").value = r;
    document.getElementById("greenField").value = g;
    document.getElementById("blueField").value = b;
    
    document.getElementById("field").innerHTML = typeof r;
}
function forInput() {
var r = document.getElementById("red").value;
	document.getElementById("field2").innerHTML = r.toString();
}