JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/humanity/jquery-ui.css" />

<label for="amount1">Amount 1:</label>
<input type="text" id="amount1" style="border:0; color:#f6931f; font-weight:bold;" />

<div id="slider1" style="width:100px"></div>
<br /><br />
<label for="amount2">Amount 2:</label>
<input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;" />
<div id="slider2" style="width:100px"></div>

JavaScript

var diff = 100;

$("#slider1").slider({
    min: diff - diff,
    max: diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value);
        $("#amount2").val(ui.value + diff);
        $('#slider2').slider("option", "value", ui.value + diff);
    }
});
$("#amount1").val($("#slider1").slider("value"));

$("#slider2").slider({
    min: diff,
    max: diff + diff,
    slide: function(event, ui) {
        $("#amount1").val(ui.value - diff);
        $("#amount2").val(ui.value);
        $('#slider1').slider("option", "value", ui.value - diff);
    }
});
$("#amount2").val($("#slider2").slider("value"));