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

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

另一答案

Answer 2

另一答案