JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="slider-vertical" style="height:200px;"></div>


<p>
<label for="amount-backwards">Volume:</label>
<input type="text" id="amount-backwards" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider-verticalbackwards" style="height:200px;"></div>

JavaScript

$("#slider-vertical").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 60,
    slide: function(event, ui) {
        $("#amount").val(ui.value);
    }
});
$("#amount").val($("#slider-vertical").slider("value"));


$("#slider-verticalbackwards").slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 100,
    value: 60,
    slide: function(event, ui) {
        $("#amount-backwards").val(100 - ui.value);
    }
});
$("#amount-backwards").val(100 - $("#slider-verticalbackwards").slider("value"));