nouislider - niUiSlider link and make the percent sum of two sliders 100 -

i have 2 nouislider's, both of should equal 100%. if slider1 moved 30% 40%, slider2 should automatically move 70% 60%, , visa-versa.

in nouislider documentation there crossupdate code example, here, linking 2 sliders move dependant of each other. example shows sliders moving in same direction. , because code i've never come across before, i've tried moving numbers around still can't sliders move inversely.

here fiddle: http://jsfiddle.net/lukemclachlan/0ny6q375/2/

the crossupdate function, solution lay, follows

function crossupdate ( value, handle, slider ) {     // if sliders aren't interlocked, don't     // cross-update.     if ( !lockedstate ) return;     // select whether increase or decrease     // other slider value.     var lvalue = slider1.is(slider) ? 1 : 0,         hvalue = lvalue ? 0 : 1;     // modify slider value.     value -= ( values[hvalue] + values[lvalue] );     // set value     $(this).val( value ); } 

if can me solve grateful. thanks.

well appears answer significanly simpler having use code in original fiddle.

this code use intialise 2 sliders. important thing animate: false, documentation states, there isn't lag when other slider moves:

$("#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     } }); 

and bit moving below:

$("#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 not whiz kid @ coding works without console errors 2 sliders.

updated fiddle show this: http://jsfiddle.net/lukemclachlan/0ny6q375/4/.

edit:

i have had edit answer, take consideration fact user may change values via input fields, instead of via slider.