Question

我创建了一个 jQuery UI滑块，其range设置为true并且在0和4处有两个句柄。我想限制这些的范围这意味着当用户滑动其中一个手柄并且其他手柄的位置使得范围超过4时，则另一个手柄应该滑动以保持范围为4，但如果它的范围小于4，那么它不应该滑动。

这意味着如果ui.values[0]等于0并且用户将另一个句柄滑动为10，则此句柄应随之滑动到6。但是，如果ui.values[0]等于2并且用户将另一个句柄滑动到4，那么它应该保持原样。

一些示例值集是：

1至5
0到4
0到2
16至19

我已经创建了一个JSFiddle来尝试这个：https://jsfiddle.net/j4hd760f/

来自JSFiddle的代码作为代码片段：

＆＃13;

$('.slider').slider({
    range: true,
    values: [0, 4],
    slide: function (ev, ui) {
        var ui1 = ui.values[0];
        var ui2 = ui.values[1];
        $('.slider').not(this).each(function () {
            total += $(this).slider('value');
        })
        $('#total').text(ui1 + " " + ui2);
    }
});

＆＃13;

.slider {
    margin: 16px;
    width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="slider1" class="slider"></div>
<div id="total"></div>

＆＃13;

Answer 1

jQuery UI Sliders内没有具体设置可以直接达到你想要的效果。因此，您需要具有在slide处理程序中执行此操作的代码。

以下代码将实现您的目标。但是，我将最大允许差异更改为20而不是4，因为4在200像素宽滑块上不可见。您可以通过设置sliderMaxDifference轻松更改此最大差异。如果你真的想要4，那么在这个答案的末尾附近会包含另一个片段。

＆＃13;

var sliderMaxDifference = 20;
var timeout;
$('.slider').slider({
    range: true,
    values: [0, 4],
    slide: function (ev, ui) {
        var movedValue = ui.value;
        //ui.handleIndex does not exist in this version of jQuery UI
        //Determine which slider moved
        var handleIndex = 1;
        if(ui.handle.nextSibling && ui.handle.nextSibling.nodeName === 'A'){
            handleIndex = 0;
        }
        var unmovedValue = ui.values[1 - handleIndex];
        //Compute the new value for the unmoved slider
        unmovedValue = Math.max(unmovedValue,movedValue - sliderMaxDifference);
        unmovedValue = Math.min(unmovedValue,movedValue + sliderMaxDifference);
        //Set the following slider value
        $(this).slider('values',1 - handleIndex, unmovedValue);
        //$(this).slider('values') will not yet reflect the new values
        //var newValues=$(this).slider('values');
        var newValues=[]
        newValues[handleIndex] = movedValue;
        newValues[1 - handleIndex] = unmovedValue;
        $('#total').text(newValues[0] + "-->" + newValues[1] 
                         + ' Difference=' + (newValues[1]-newValues[0]));
    }
});

＆＃13;

.slider {
    margin: 16px;
    width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="slider1" class="slider"></div>
<div id="total"></div>

＆＃13;

应该注意的是，jQuery UI滑块不允许下滑块变得比较高滑块大。当滑块相等时，这会导致一些UI混淆。您必须将最近移回的滑块移动到另一个滑块之外，以便抓住另一个滑块移动它。

我删除了您的代码：

$('.slider').not(this).each(function () {
    total += $(this).slider('value');
})

因为它似乎什么都不做（total从未声明或以其他方式使用过。）

如果您真的想要它的差异为4，那么您可以尝试以下代码段（仅更改：var sliderMaxDifference = 4;）：

＆＃13;

var sliderMaxDifference = 4;
var timeout;
$('.slider').slider({
    range: true,
    values: [0, 4],
    slide: function (ev, ui) {
        var movedValue = ui.value;
        //ui.handleIndex does not exist in this version of jQuery UI
        //Determine which slider moved
        var handleIndex = 1;
        if(ui.handle.nextSibling && ui.handle.nextSibling.nodeName === 'A'){
            handleIndex = 0;
        }
        var unmovedValue = ui.values[1 - handleIndex];
        //Compute the new value for the unmoved slider
        unmovedValue = Math.max(unmovedValue,movedValue - sliderMaxDifference);
        unmovedValue = Math.min(unmovedValue,movedValue + sliderMaxDifference);
        //Set the following slider value
        $(this).slider('values',1 - handleIndex, unmovedValue);
        //$(this).slider('values') will not yet reflect the new values
        //var newValues=$(this).slider('values');
        var newValues=[]
        newValues[handleIndex] = movedValue;
        newValues[1 - handleIndex] = unmovedValue;
        $('#total').text(newValues[0] + "-->" + newValues[1] 
                         + ' Difference=' + (newValues[1]-newValues[0]));
    }
});

＆＃13;

.slider {
    margin: 16px;
    width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="slider1" class="slider"></div>
<div id="total"></div>

＆＃13;

更通用的解决方案是使用滑块上的属性来存储特定滑块所允许的差异。

Answer 2

作为 Mayken 回答的补充，jQuery UI 在某些时候将滑块句柄元素从“A”更改为“span”。

要在较新版本的 jQuery 中工作的答案，请更改：

if(ui.handle.nextSibling && ui.handle.nextSibling.nodeName === 'A'){

到

if(ui.handle.nextSibling && ui.handle.nextSibling.nodeName === 'SPAN'){

如何限制jQuery UI滑块的范围？

2 个答案: