JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Cesar Mugnatto's non-linear jQuery slider</h1>
<table>
    <tr>
        <td>
            <div id="valMax"></div><br />
            <div id="sliderContainer"></div><br />
            <div id="valMin"></div>
        </td>
        <td>
            <div id="comments"></div>
        </td>
    </tr>
</table>

CSS

.ui-slider-vertical {
    height: 400px;
}
.ValueList {
    width: 100px;
    text-align: right;
}
td {
    vertical-align: top;
    padding: 10px;
    width:50%;
    font-size: 12px;
}

JavaScript

//Set up an array of values in a non-linear scale, in this example, the powers of 2
vals = new Array();
for (var i=0; i<50; i++) {
    vals.push(Math.pow(2, i));
}
/* */
$.each(vals, function(index, val) {
    $("#comments").after('<div class="ValueList" id="' + val + '">' + val + '</div>');
});
$("#comments").after("<u>The following are the valid values for this slider. Moving either of the handles will update the handle's value to precisely one of the numbers below.</u><br /><br />");
/* */
$("#valMax").html(vals[vals.length-1] + " units");
$("#valMin").html(vals[0] + " units");

//We keep track of the current positions of the hanldes using min and max indexes
var currMinIndex = 0;
var currMaxIndex = vals.length-1;

//Create the slider control using the array of non-linera values with a callback function on the slide event, using vertical orientation and two handles
$("#sliderContainer").slider({orientation: "vertical",range: true,min: vals[0],max: vals[vals.length-1], values: [vals[0], vals[vals.length-1]], create:function(event, ui) {stopControl()}, slide:function(event, ui){slideControl(ui)}, stop:function(event, ui) {stopControl()}});

//Callback function on slide event
function slideControl(objSlider) {
	var handle = objSlider.handle;
	var values = objSlider.values;
	synchControls(handle, values);
    stopControl(); //Or change the background dynamically
}

function stopControl() {
    $(".ValueList").css("background-color", "white");
    if (currMinIndex == currMaxIndex) {
        $("#" + vals[currMinIndex]).css("background-color", "#ffff00");
    } else {
        $("#" + vals[currMinIndex]).css("background-color", "#ff0000");
        $("#" + vals[currMaxIndex]).css("background-color", "#00ff00");
    }
}

//We may want to call this function from other points in the code (like the stop event)
function synchControls(objHandle, valHandle) {
    var doSnap;
    //Determine the lower-bound handle position and/or value
    doSnap =...