JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="slider"></div>

<div id="result"></div>

CSS

#slider {
    width:500px;
    margin:0 auto;
    background: linear-gradient(89.93deg, #FF6161 6.04%, #A5BB67 51.05%, #3EB221 97.45%);
}

#result {
    width:100px;
    height:100px;
    margin:100px auto;
    border-radius:50%;
}

JavaScript

var gradient = [
    [
        0,
        [255, 97, 97]
    ],
    [
        49.24,
        [165, 187, 103]
    ],
    [
        100,
        [62, 178, 33]
    ]
];

var sliderWidth = 500;

$( "#slider" ).slider({
    min: 1,
    slide: function( event, ui ) {
        var colorRange = []
        console.log('percentage: ', ui.value);
        $.each(gradient, function( index, value ) {
            if(ui.value<=value[0]) {
                colorRange = [index-1,index]
                return false;
            }
        });
        
        //Get the two closest colors
        var firstcolor = gradient[colorRange[0]][1];
        var secondcolor = gradient[colorRange[1]][1];

        //Calculate ratio between the two closest colors
        var firstcolor_x = sliderWidth*(gradient[colorRange[0]][0]/100);
        var secondcolor_x = sliderWidth*(gradient[colorRange[1]][0]/100)-firstcolor_x;
        var slider_x = sliderWidth*(ui.value/100)-firstcolor_x;
        var ratio = slider_x/secondcolor_x;
        
        //Get the color with pickHex(thx, less.js's mix function!)
        var result = pickHex( secondcolor,firstcolor, ratio );
        console.log('color: ', result);              
        $('#result').css("background-color", 'rgb('+result.join()+')');
        
    }
});

function pickHex(color1, color2, weight) {
    var p = weight;
    var w = p * 2 - 1;
    var w1 = (w/1+1) / 2;
    var w2 = 1 - w1;
    var rgb = [Math.round(color1[0] * w1 + color2[0] * w2),
        Math.round(color1[1] * w1 + color2[1] * w2),
        Math.round(color1[2] * w1 + color2[2] * w2)];
    return rgb;
}