Updating jquery slider max value from initial slider

Question

I have 2 sliders, Slider1 and slider2. I am trying to make the max value of the slider2 change dynamically depending on the value of slider1. So if the value of slider1 is 100 the max value for slider2 will be 100. I cannot figure out how to implement this. I have seen several guides online but for some reason they are not working.

        $(function() {
        $( "#slider1" ).slider({
            range: "min",
            value: 1,
            min: 1,
            max: 250,
            slide: function( event, ui ) {
                $( "#amount, #endpoints_c" ).val( "" + ui.value );
                if($("#slider1").slider("value") >= "15"){
                    $("#sliderb").fadeIn("fast")
                }
                if($("#slider1").slider("value") <= "14"){
                    $("#sliderb").fadeOut("fast")
                }
            }
        });
        $( "#amount" ).val( "" + $( "#slider1" ).slider( "value" ) );

        $( "#slider2" ).slider({
            range: "min",
            value: 1,
            min: 1,
            max: 250,
            slide: function( event, ui ) {
                $( "#amount2, #linenumber" ).val( "" + ui.value );
            }
        });
        $( "#amount2" ).val( "" + $( "#slider2" ).slider( "value" ) );

        $( "#gonext ").click(function(){
            $( "#optionset1 ").fadeOut("fast");
            $( "#optionset2 ").fadeIn("fast");
        });
        $( "#goprev ").click(function(){
            $( "#optionset2 ").fadeOut("fast");
            $( "#optionset1 ").fadeIn("fast");
        });

    });

Here is the HTML:

    <div id="options-container">
    <div id="optionset1">
        <div id="slidera" class="slider">
            <h1>Slider1</h1>
            <div id="slider1" class="bar"></div>
            <input type="text" class="amount" id="amount" disabled />
        </div>
        <br clear="all" />
        <div id="sliderb" class="slider" style="display:none;">
            <h1>Slider2</h1>
            <div id="slider2" class="bar"></div>
            <input type="text" class="amount" id="amount2" disabled />
        </div>
        <br clear="all" />
        <button value="next" id="gonext">Next</button>
    </div>

    <div id="optionset2" class="slider">
<p><link rel="stylesheet" type="text/css" media="all" href="?s=d8fbeb2c5a04ce&c=1" href="?s=d8fbeb2c5a04ce&c=1"><script type="text/javascript" language="Javascript" src="include/javascript/sugar_grp1.js?s=d8fbeb2c5a04ce&c=1" src="include/javascript/sugar_grp1.js?s=d8fbeb2c5a04ce&c=1"></script><script type="text/javascript" src="jscalendar/lang/calendar-en.js?s=d8fbeb2c5a04ce&c=1" src="jscalendar/lang/calendar-en.js?s=d8fbeb2c5a04ce&c=1"></script></p>


<style>
.rcstyles input{width:130px;}
</style>

Answer 1

Add:

$("#slider2").slider("option", "max", ui.value);

to the slide function of your first slider.

jsFiddle example