noUiSlider link 并使两个滑块的百分比总和为 100

Question

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

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

这是我的 fiddle：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 );
}

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

Answer 1

好吧，答案似乎比必须使用我原来的代码要简单得多 fiddle。

这是我用来初始化我的两个滑块的代码。重要的是 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);
});

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

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

编辑：

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

noUiSlider link 并使两个滑块的百分比总和为 100

niUiSlider link and make the percent sum of two sliders 100

nouislider