JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css">
<p class="ui-state-default ui-corner-all" style="padding: 4px; margin-top: 4em;">
    <span style="float: left; margin: -2px 5px 0 0;"></span>Distribution
</p>
<strong>Total Points Spendable: </strong><div id="spendable">1000</div>
<strong>Total Points Spent (Attempted): </strong><div id="attemptedToSpend">0</div>
<strong>Total Points Spent: </strong><div id="spent">0</div>
<strong>Change: </strong><div id="change">0</div>
<div id="status"></div>

<div id="eq">
    <div style="margin: 15px;" id="test1">Test1</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>
    
    <div style="margin: 15px;" id="test2">Test2</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>
    
    <div style="margin: 15px;" id="test3">Test3</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>
    
    <div style="margin: 15px;" id="test4">Test4</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>
    
    <div style="margin: 15px;" id="test5">Test5</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

CSS

#eq > div {
    width:300px;
}
#eq > div .slider {
    width: 200px; float: left;
}
#eq > div > span {
    float: right;
}

JavaScript

$(
  function()
  {
    var
        maxValueSlider = 500,
        maxValueTotal = 1000,
        $sliders = $("#eq .slider"),
        valueSliders = [],
        $displaySpentTotal = $('#spent');

    function arraySum(arr)
    {
      var sum = 0, i;
      for(i in arr) sum += arr[i];
      return sum;
    }

    $sliders
      .each(
        function(i, slider)
        {
          var
            $slider = $(slider),
            $spent = $slider.next('.spent');
          valueSliders[i] = 0;
          $slider
            .slider(
              {
                range: 'min',
                value: 0,
                min: 0,
                max: maxValueSlider,
                step: 1,
                animate: true,
                orientation: "horizontal",
                slide:
                  function(event, ui)
                  {
                    var
                      sumRemainder = arraySum(valueSliders) - valueSliders[i],
                      adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
                    valueSliders[i] = adjustedValue;
                    // display the current total
                    $displaySpentTotal.text(sumRemainder + adjustedValue);
                    // display the current value
                    $spent.text(adjustedValue);
                    // set slider to adjusted value
                    $slider.slider('value', adjustedValue);

                    // stop sliding (return false) if value actually required adjustment
                    return adjustedValue == ui.value;
                  }
              }
            );
        }
      );
  }
);