JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<input id="test-1" type="range" class="test-1" min="1" max="50">
<input id="test-2" type="range" class="test-2" min="1" max="50">

<div class="divs">
    <p class="first"></p>
    <p class="second"></p>
</div>

CSS

.divs {
    display: flex;
    width: 100%;
	border: 1px solid #ccc;
}

.first,
.second {   	
	height: 10px;
}

.first {
    background-color: red;
}

.second {
    background-color: pink;
}

JavaScript

$(document).ready(function() {

    $('input').on('input change keyup', function() {
        var inputF = $("#test-1").val(),
            inputS = $("#test-2").val();

        $(".first").css({
            'width': inputF + '%'
        });

        $(".second").css({
            'width': inputS + '%'
        });
    });

});