JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="leftElement" class="opacityElement">

</div>

<div id="rightElement" class="opacityElement">

</div>


<input type="range" min="0" max="100" value="50" id="slider">

CSS

.opacityElement{width:100px; height:100px;display:inline-block}

#rightElement{background:red}
#leftElement{background:blue}

JavaScript

var right = $('#rightElement');
var left = $('#leftElement');
var lastNum = 0;

$(slider).on('input', function() {
    var v = $(this).val();
    onInput(v);
});


function onInput(value){
    if(lastNum < value) {
        var parsedValue = parseInt(value);
        console.log("increasing");
$(left).css('opacity', (parsedValue/100));

console.log("increasing percentage" + (parsedValue/100));
console.log( "increasing percentage but adding right side" + ((parsedValue/100) + parsedValue));
    }

    if(lastNum > value) {
        var parsedValue = parseInt(value);
        console.log("decreasing");

$(left).css('opacity', (parsedValue/100));

$(right).css('opacity', (parsedValue/100));

console.log( "decreasing percentage" + (parsedValue/100));

    }

    lastNum = value;
    console.log("onInput: " + value);
  }