JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css">
<div class="demo">
    <div class="slider"></div>
    
</div>

CSS

body { padding: 1.5em; }
div.slider { margin: 1em 0; }

JavaScript

var maxSum = 1500;

var $sliders = $(".slider").slider({
    value: 0,
    min: 0,
    max: 1500,
    step: 10,
    stop: function(event, ui) {
        $(this).next().text("Value: " + ui.value);        
        var count = 0;
        $(".slider").not(this).each(function() {
            if($(this).slider("option", "value") > 0) {
                count++;
            }
        });
        var available = 1500 - ui.value
            valueEach = available / (count > 0 ? count : 6);
                
        $(".slider").not(this).each(function() {
            if($(this).slider( "option", "value") > 0 || count == 0) {
                $(this).slider( "option", "value", valueEach );
                $(this).next().text("Value: " + valueEach);
            }
        });
    }
});