0

我有 2 个滑块，滑块 1 和滑块 2。我试图使slider2的最大值根据slider1的值动态变化。因此，如果滑块 1 的值为 100，滑块 2 的最大值将为 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>
4

1 回答 1

2

添加：

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

到你的第一个滑块的滑动功能。

jsFiddle 示例

于 2012-07-10T15:18:21.593 回答