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

【问题标题】：Limit jQuery slider to the value of another slider将 jQuery 滑块限制为另一个滑块的值
【发布时间】：2018-03-02 05:49:08
【问题描述】：

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

我需要根据另一个的价值来限制一个，这样它们就不会重叠。我想出了下面的代码。它起作用了，除了一个非常烦人的问题 - 当我拖动滑块时，它们会在我仍然拖动它们时相互越过，只是在我释放鼠标按钮时恢复到限制值。

纯属偶然，我找到了添加 ui.someunknownmethod('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 代码）所以如果有人找到它，请在此处发布...

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

你可以做类似的事情

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

或

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

查看http://jqueryui.com/demos/slider/#methods了解更多信息/方法

【讨论】：

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

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是我的 2 美分（主 slider 将更新子 slider 的 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);
        }
    });

});

【讨论】：