Question

当我从这里获取两个jQuery滑块控件时，我正在处理这种情况： http://jqueryui.com/demos/slider/#rangemin

我需要根据另一个的值限制一个，以便它们不重叠。我想出了下面的代码。除了一个非常令人讨厌的问题外，它还有效 - 当我拖动滑块时，它们会在我拖动它们的时候经过另一个滑块，只有在释放鼠标按钮时恢复到限制值。

纯粹是偶然的，我找到了添加ui.someunknown方法（'1'）的解决方案;下面的一行。

所以我的问题是，我可以保留该行而不会引起任何问题吗？

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

编辑：不要使用抛出未处理异常的方法 - 当然，它可以在大多数浏览器中使用，除了旧的IE浏览器会显示弹出的消息框遇到每个错误。这对用户来说非常烦人！

到目前为止，我无法找到我正在寻找的内容（除了重写滑块UI代码之外），所以如果有人发现它，请在此处发布...

Answer 1

你可以做点什么

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

或

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

请参阅http://jqueryui.com/demos/slider/#methods了解更多信息/方法

Answer 2

阅读the API，似乎你也可以在滑块已经初始化后改变“min”和“max”。你需要做的就是让slider1“min”选项等于slider2“max”选项，只要拖动其中一个就更新。

Answer 3

这是我的2美分（主slider将更新子slider＆＃39; s min value：

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滑块限制为另一个滑块的值

3 个答案: