JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<label for="clr">Percent:</label><input id="clr" type="range" min=1 max=100 value=1><span id="p"></span>
<div>
    <div class="rec"></div>
</div>

CSS

.rec {
    width: 50px;
    height:50px;
    border: 1px solid black;
    background: red;
}

JavaScript

$('#clr').change(function(){
    var p =  $('#clr').val() || 1,
        g = Math.round(255*(p/100)),
        r = 255-g;
    $('.rec').css('background',"rgb("+r+","+g+",0)");
    $('#p').text(p+"%");
    console.log("rgb("+r+","+g+",0)");
});