JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">
<ul>
    <li>
        <input type="text" id="item1" value="0" />
        <div class="slider" id="slider-item1"></div>
    </li>
    <li>
        <input type="text" id="item2" value="0" />
        <div class="slider" id="slider-item2"></div>
    </li>
    <li>
        <input type="text" id="item3" value="0" />
        <div class="slider" id="slider-item3"></div>
    </li>
    <li>
        <input type="text" id="item4" value="0" />
        <div class="slider" id="slider-item4"></div>
    </li>
</ul>

CSS

.slider{
    width:150px;
    font-size:50%;
}
input{
    width:20px;
}

JavaScript

function total(){
    var value = parseInt($('#item1').val()) + parseInt($('#item2').val()) + parseInt($('#item3').val()) + parseInt($('#item4').val());
    if(value > 10){
        $('.slider').slider({max: $(this).slider(max)});
    }
}

/* Item1 */
$('#slider-item1').slider({
    range: "min", min: 0, max: 5,
    value: $('#item1').val(),
    slide: function(event, ui){$('#item1').val(ui.value);total();}
});
$('#item1').change(function(){
    $('#slider-item1').slider('value', $(this).val()) 
});

/* Item2 */
$('#slider-item2').slider({
    range: "min", min: 0, max: 5,
    value: $('#item2').val(),
    slide: function(event, ui){$('#item2').val(ui.value);total();}
});
$('#item2').change(function(){
    $('#slider-item2').slider('value', $(this).val()) 
});

/* Item3 */
$('#slider-item3').slider({
    range: "min", min: 0, max: 5,
    value: $('#item3').val(),
    slide: function(event, ui){$('#item3').val(ui.value);total();}
});
$('#item3').change(function(){
    $('#slider-item3').slider('value', $(this).val()) 
});

/* Item4 */
$('#slider-item4').slider({
    range: "min", min: 0, max: 5,
    value: $('#item4').val(),
    slide: function(event, ui){$('#item4').val(ui.value);total();}
});
$('#item4').change(function(){
    $('#slider-item4').slider('value', $(this).val()) 
});