JSFiddle - React, Tailwind, and code Playground

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    </head>
    <body>
        <!-- Home Page-->
        <div data-role="page" id="home">
            <div data-role="header" data-position="fixed" data-id="myheader">
                <h1>test</h1>
                
            </div>
            <!-- /header -->
            <div data-role="content">
                
                <ul id="sliders1">
                    <li>
                        <input type="range" id="slider" class="value" name="slider1" value="0"
                        min="0" max="24" data-highlight="true" />
                    </li>
                    <li>
                        <input type="range" class="value" id="slider" name="slider2" value="0"
                        min="0" max="24" data-highlight="true" />
                    </li>
                    <li>
                        <input type="range" class="value" id="slider" name="slider3" value="0"
                        min="0" max="24" data-highlight="true" />
                    </li>
                </ul> <a href="#home2">Link to 2nd page</a> 
            </div>
        </div>
        <div data-role="page" id="home2">
            <div data-role="header" data-position="fixed" data-id="myheader">
                <h1>test</h1>
                
            </div>
            <!-- /header -->
            <div data-role="content">
                <ul id="sliders">
                    <li>
                        <input type="range" id="slider" class="value" name="slider4" value="0"
                        min="0" max="24" data-highlight="true" />
                    </li>
                    <li>
                        <input type="range"...

JavaScript

$(document).on('pagebeforeshow', '#home, #home2', function(){       
    var sliders = $.mobile.activePage.find("#sliders1 .slider");
    
    sliders.each(function() {
        var max = 24;
        var value = Number($(this).text(), 10),
            availableTotal = max;
    });
    
    $(".value").change(function() {
        var thisAmount = Number($(this).prop("value"));
        var totalMax = 24;
        var indMin = Number($(this).attr("min"));
        var indMax = Number($(this).attr("max"));
        var total = 0;
        
        //Get the values of all other text boxes
        $.mobile.activePage.find('.value').not(this).each(function() {

            total += Number($(this).prop("value"));
        });
        
        //Find the remaining from our total sliders max
        var remaining = totalMax - total;
        
        if (remaining < 0) {
            remaining = 0;
        }
        //if we are under our minimums, go for it! Otherwise, reduce the number.
        if (thisAmount >= indMin && thisAmount < indMax && thisAmount < totalMax && thisAmount < remaining) {
            $(this).siblings(".slider").slider("option", "value", thisAmount);
            //total += thisAmount;
        } else {
            //var setMax = ((indMax + totalMax) - Math.abs(indMax - totalMax)) / 2;
            var setMax = Math.min(indMax, totalMax, remaining);
            $(this).siblings(".slider").slider("option", "value", setMax);
            $(this).prop("value", setMax);
            //total += (thisAmount - setMax);
        }
        
        //above was getting buggy, so lets just reset total and get it again
        total = 0;
        //Get the values of all text boxes
        $('.value').each(function() {
            total += Number($(this).prop("value"));
        });
        //Find our new remaining number after updating total for this value
        remaining = totalMax - total;
        if (remaining < 0) {
            remaining = 0;
        }
        //Set each...