Question

我有两个noUiSlider，两者都应该等于100％。因此，如果slider1从30％移动到40％，则slider2应自动从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 );
}

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

Answer 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/。

编辑：

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

niUiSlider链接并制作两个滑块100的百分比

1 个答案: