JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<h3>Apple: <span></span></h3>
<div id="apple" class="slider"></div>
<h3>banana: <span></span></h3>
<div id="banana" class="slider"></div>
<h3>kiwi: <span></span></h3>
<div id="kiwi" class="slider"></div>
<h3>lemon: <span></span></h3>
<div id="lemon" class="slider"></div>
<h3>orange: <span></span></h3>
<div id="orange" class="slider"></div>

<h2 id="total"></h2>

CSS

h3{
    margin: 25px 0 10px;
    font-weight: bold;
    font-family: arial;
}
.slider {
    width: 100px;
}

JavaScript

var slides = $('.slider').slider({
    value: 20,
    slide: function(event, ui) {
        $(this).prev().find('span').html( ui.value );
        total = sliderTotal();
        if (total > 100){
            var minus = Math.floor((total - 100) / (slides.length + 1));
            slides.not( this ).each( function() {
                var val = $(this).slider("value") - minus;
                $(this).slider("value", val );
            });
        }
        $('#total').html( sliderTotal() );
    },
    change: function( event, ui ) {
        $(this).prev().find('span').html( ui.value );
    }
});

function sliderTotal() {
    var total = 0;
    slides.each( function() {
        total += $(this).slider("value");
    });
    return total;
}