javascript - 从初始 slider 更新 jquery slider 最大值

Question

我有 2 个 slider ，Slider1 和 slider2。我试图使 slider2 的最大值根据 slider1 的值动态变化。因此，如果 slider1 的值为 100，则 slider2 的最大值将为 100。我不知道如何实现它。我在网上看到了一些指南，但由于某种原因它们不起作用。

        $(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");
        });

    });

这是 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

添加:

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

到第一个 slider 的滑动功能。

jsFiddle example