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>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>    
</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,
    slide: function(event, ui) {
        var sum = 0;
        
        // Don't add the value for this slider;
        // We need to add the new value represented by the slide event
        $(".slider").not(this).each(function() {
            sum += $(this).slider("value");
        });

        // Add the slide event value
        sum += ui.value;

        if (sum > maxSum) event.preventDefault();
       // else $(this).next().html("Value: " + ui.value);
    }
});