1

我有两个 noUiSlider，两者都应该等于 100%。因此，如果滑块 1 从 30% 移动到 40%，滑块 2 应该自动从 70% 移动到 60%，反之亦然。

在 noUiSlider 文档中，有一个crossUpdate代码示例HERE用于链接两个滑块，以便它们相互依赖地移动。但是，该示例显示滑块沿相同方向移动。而且因为这段代码是我以前从未遇到过的，所以我尝试过移动数字，但我仍然无法让滑块反向移动。

这是我的小提琴：http: //jsfiddle.net/LukeMcLachlan/0ny6q375/2/

解决方案所在的 crossUpdate 函数如下

function crossUpdate ( value, handle, slider ) {
    // If the sliders aren't interlocked, don't
    // cross-update.
    if ( !lockedState ) return;
    // Select whether to increase or decrease
    // the other slider value.
    var lValue = slider1.is(slider) ? 1 : 0,
        hValue = lValue ? 0 : 1;
    // Modify the slider value.
    value -= ( values[hValue] + values[lValue] );
    // Set the value
    $(this).val( value );
}

如果有人能帮我解决这个问题，我将不胜感激。谢谢。

4

1 回答 1

1

好吧，看起来答案比在我原来的小提琴中使用代码要简单得多。

这是我用来初始化我的两个滑块的代码。重要的是animate: false，正如文档所述，当另一个滑块移动时没有滞后：

$("#hardwood").noUiSlider({
    start: 100,
    step: 1,
    animate: false,
    connect: 'lower',
    format: wNumb({
        decimals: 0
    }),
    range: {
        'min': 0,
        'max': 100
    }
});
$("#softwood").noUiSlider({
    start: 0,
    step: 1,
    animate: false,
    format: wNumb({
        decimals: 0
    }),
    connect: 'lower',
    range: {
        'min': 0,
        'max': 100
    }
});

进行移动的位如下：

$("#hardwood").Link('lower').to($("#hardwoodpercent"));
$("#softwood").Link('lower').to($("#softwoodpercent"));
$('#hardwood').on('slide', function(){
    var hardcalc = 100 -  $('#hardwood').val();
    $('#softwood').val(hardcalc);
});
$('#softwood').on('slide', function(){
    var softcalc = 100 -  $('#softwood').val();
    $('#hardwood').val(softcalc);
});
$('#hardwoodpercent').on('change', function(){
    var softcalc = 100 -  $('#hardwoodpercent').val();
    $('#softwood').val(softcalc);
});
$('#softwoodpercent').on('change', function(){
    var softcalc = 100 -  $('#softwoodpercent').val();
    $('#hardwood').val(softcalc);
});

我不是编码方面的神童，但这对于两个滑块来说没有控制台错误。

更新了小提琴以显示：http: //jsfiddle.net/LukeMcLachlan/0ny6q375/4/。

编辑：

我不得不编辑这个答案，以考虑到用户很可能通过输入字段而不是通过滑块更改值的事实。

于 2015-07-18T07:58:37.520 回答