JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" id="range" value="0" onchange="update(this.value)">
    
<div id="color"></div>

CSS

#color {
    width: 200px;
    height: 200px;
    background: #FF0000;
}

JavaScript

var red = "#FF0000";
var yellow = "#FFFF00";
var green = "#00FF00";

// 16 possible values (0-15)
var hex = '0123456789ABCDEF';

function update(val) {
    if(val == 0) {
        $('#color').css('background', red);        
    } else if(val == 50) {
        $('#color').css('background', yellow);
    } else if(val == 100) {
        $('#color').css('background', green);
    } else {
        if(val < 50) {
            // val < 50 is between red and yellow
            var perc = val/50;
            var hexVal = hex[Math.round(16*perc)];
            $('#color').css('background', "#FF"+hexVal+hexVal+"00");
        } else if(val > 50) {
            // val > 50 is between yellow and green
            var perc = val/100/0.5-1;
            var hexVal = hex[hex.length - Math.round(16*perc)];
            $('#color').css('background', "#"+hexVal+hexVal+"FF00");
        }
    }
}