Ссылка niUiSlider и сделать процентную сумму двух ползунков 100

Question

У меня есть два noUiSlider's, оба из которых должны равняться 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); 
} 

Если кто-то может помочь мне решить эту проблему, я буду очень благодарен. Благодарю.

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); 
}); 

I я не чувак при кодировании, но это работает без ошибок консоли для двух ползунков.

Обновлена ​​скрипка, чтобы показать это: http://jsfiddle.net/LukeMcLachlan/0ny6q375/4/.

EDIT:

мне пришлось изменить этот ответ, чтобы принять во внимание тот факт, что пользователь может также изменять значения с помощью полей ввода, а не с помощью ползунка.