JSFiddle - React, Tailwind, and code Playground

by hmahida

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range"></div>

CSS

.ui-slider {
    background: green;
}
.ui-slider-range {
    background: yellow;
}
#YourDiv {
    float: right;
    height: 100%;
    background: red;
    border-radius: 0 4px 4px 0;
}

JavaScript

$(function () {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 100,
        values: [25, 50],
        slide: function (event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            console.log(ui.values[1] +'%');
            $('#YourDiv').css('width', 100 - ui.values[1] +'%');
        }
    }).append('<div id="YourDiv" style="width: 50%"></div>');
    
    $("#amount").val("$" + $("#slider-range").slider("values", 0) +
        " - $" + $("#slider-range").slider("values", 1));
});