JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css"
        />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
    </head>
    
    <body>
        <form>
            <!-- 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"
                           ...

JavaScript

var sliders = $("#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
                            $('.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);
           ...