JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<div id="slider"></div>

CSS

#slider 
{
  
  
}

JavaScript

$(function () {
    // the code belows assume the colors array is exactly one element bigger than the handlers array.
    var handlers = [20, 40, 60,80];
    var colors = ["#ff0000", "#00ff00", "#0000ff", "#00ffff","#FFF"];
    updateColors(handlers);
    
    $("#slider").slider({
        min: 0,
        max: 100,
        values: handlers,
        slide: function (evt, ui) {
            updateColors(ui.values);
        }
    });
    
    function updateColors(values) {
        var colorstops = colors[0] + ", "; // start left with the first color
            for (var i=0; i< values.length; i++) {
                colorstops += colors[i] + " " + values[i] + "%,";
                colorstops += colors[i+1] + " " + values[i] + "%,";
            }
            // end with the last color to the right
            colorstops += colors[colors.length-1];
            
            /* Safari 5.1, Chrome 10+ */
            var css = '-webkit-linear-gradient(left,' + colorstops + ')';
            $('#slider').css('background-image', css);
    }
});