将jQuery滑块限制为另一个滑块的值_Jquery_Jquery Ui_Jquery Plugins

将jQuery滑块限制为另一个滑块的值

jquery jquery-ui jquery-plugins

将jQuery滑块限制为另一个滑块的值,jquery,jquery-ui,jquery-plugins,Jquery,Jquery Ui,Jquery Plugins,我当时正在处理一种情况，当时我从这里获得了两个jQuery滑块控件：我需要根据另一个的值限制一个，这样它们就不会重叠。我想出了下面的代码。它起作用了，除了一个非常恼人的问题——当我拖动滑块时，它们会在我仍在拖动它们时彼此擦肩而过，但在我松开鼠标按钮时，它们会恢复到限制值纯属偶然，我找到了添加ui的解决方案；下面一行所以我的问题是，我能保持这条线而不引起任何问题吗 <style type="text/css"> body{ font: 62.5% "Trebuchet

我当时正在处理一种情况，当时我从这里获得了两个jQuery滑块控件：

我需要根据另一个的值限制一个，这样它们就不会重叠。我想出了下面的代码。它起作用了，除了一个非常恼人的问题——当我拖动滑块时，它们会在我仍在拖动它们时彼此擦肩而过，但在我松开鼠标按钮时，它们会恢复到限制值

纯属偶然，我找到了添加ui的解决方案；下面一行

所以我的问题是，我能保持这条线而不引起任何问题吗

<style type="text/css">
    body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}

    #slider1 .ui-slider-range { background: #8ae234; }
    #slider2 .ui-slider-range { background: #729fcf; }

    #sliderContainer{
        width: 400px;
        margin: 6px 0px;
    }


</style>    
    </head>

    <body>

        <!-- Slider -->
        <div id="sliderContainer">
        <div id="slider1"></div>
        </div>
        <div id="sliderContainer">
        <div id="slider2"></div>
        </div>

        <span id="txt">-</span>
        <span id="txt2">-</span>

    <script>
    $(function(){
        $("#slider1").slider({
            orientation: "horizontal",
            range: "max",
            max: 255,
            value: 50,
            slide: refresh1,
            change: refresh1
        });
        $("#slider2").slider({
            orientation: "horizontal",
            range: "max",
            max: 255,
            value: 30,
            slide: refresh2,
            change: refresh2
        });
    });

    function refresh1(e, ui)
    {
        var slider2 = $("#slider2");

        var v1 = ui.value;
        var v2 = slider2.slider('value');

        if(v1 < v2)
        {
            $("#slider1").slider('value', v2);

            //This is the line that "saves the day"
            ui.someunknownmethod('1');
        }

        $("#txt").text(v1);
    }
    function refresh2(e, ui)
    {
        var slider1 = $("#slider1");

        var v1 = slider1.slider('value');
        var v2 = ui.value;

        if(v2 > v1)
        {
            $("#slider2").slider('value', v1);

            //This is the line that "saves the day"
            ui.someunknownmethod('1');
        }

        $("#txt2").text(v2);
    }

    </script>
    </body>


正文{字体：62.5%“投石机MS”，无衬线；边距：50px；}
#slider1.ui滑块范围{背景：#8ae234；}
#slider2.ui滑块范围{背景：#729fcf；}
#幻灯片容器{
宽度：400px；
利润率：6px 0px；
}
-
-
$（函数（）{
$（“#滑块1”）.滑块({
方向：“水平”，
射程：“最大”，
最高：255，
价值：50，
幻灯片：刷新1，
更改：刷新1
});
$（“#滑块2”）.滑块({
方向：“水平”，
射程：“最大”，
最高：255，
数值：30，
幻灯片：刷新2，
更改：刷新2
});
});
功能刷新1（e、ui）
{
var slider2=$（“#slider2”）；
var v1=ui.value；
var v2=slider2.slider（'value'）；
如果（v1v1）
{
$（“#slider2”）.slider（'value'，v1）；
//这是一句“拯救世界”的话
ui.someunknown方法（'1'）；
}
$（“#txt2”）.text（v2）；
}

编辑：不要使用抛出未处理异常的方法——当然，这在大多数浏览器中都适用，但旧版IE除外，在旧版IE中，浏览器会为遇到的每个错误显示一个弹出消息框。这对用户来说是相当烦人的

到目前为止，我还没有找到我要找的东西（除了重写一个滑动用户界面代码），所以如果有人发现了，请在这里发布…

你可以这样做

$("#slider2").slider("option", "min", 25);

或

有关更多信息/方法，请参见阅读，在滑块已初始化后，您似乎还可以更改“最小”和“最大”。您需要做的就是保持slider1“min”选项与slider2“max”选项相等，并在拖动其中一个选项时进行更新。

这是我的2美分（main

slider

将更新sub

slider

的

最小值

：

jQuery(function($){

    var handle1 = $( "#sub" );
    $( "#sub-slider" ).slider({
        min: 12,
        max: 28,
        create: function() {
            handle1.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle1.text( ui.value );
        }
    });

    //#menu-line

    var handle = $( "#main" );
    var main_val;
    $( "#main-slider" ).slider({
        min: 16,
        max: 36,
        create: function() {
            handle.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle.text( ui.value );
            main_val = ui.value;
            $( "#sub" ).text(main_val);
            $( "#sub-slider" ).slider( 'option', 'min', main_val);
        }
    });

});

它不会限制滑块的位置。它只会设置其最小范围值，但滑块头仍可以物理拖动到滑块的最左侧/右侧。

jQuery(function($){

    var handle1 = $( "#sub" );
    $( "#sub-slider" ).slider({
        min: 12,
        max: 28,
        create: function() {
            handle1.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle1.text( ui.value );
        }
    });

    //#menu-line

    var handle = $( "#main" );
    var main_val;
    $( "#main-slider" ).slider({
        min: 16,
        max: 36,
        create: function() {
            handle.text( $( this ).slider( "value" ) );
        },
        slide: function( event, ui ) {
            handle.text( ui.value );
            main_val = ui.value;
            $( "#sub" ).text(main_val);
            $( "#sub-slider" ).slider( 'option', 'min', main_val);
        }
    });

});