jQuery UI slider - three input fields - max value issue

See more:

Javascript

jQuery

jQuery-UI

hey!

I've stucked with my current project. I have two sliders:
- SliderA (which can give values: 50 to 100)
- SliderB (which can give values: 0 to 50 but it spread data into two inputs)

data from those sliders is collected into three inputs. Partially it works correctly. The issue is with SliderB and it's max value. I want to base its max value on substraction:
100 - Input1 value.

Here is the code:

$(document).ready(function() {

	var getmax = parseInt($('#value_1').val(), 10);

  $('#sliderA').slider({
    min: 50,
    max: 100,
    change: function(e, ui) {
      $('#value_1').val(ui.value);
    }
  });
  
  $('#sliderB').slider({
    min: 0,
    max: 100 - getmax,
    change: function(e, ui) {
      $('#value_2').val(ui.value);
      $('#value_3').val(50 - ui.value);
    }
  });

  $('.field-group').keydown(function(e) {
    e.preventDefault();
    return false;
  });


});

<div id="sliderA" class="slider"></div>
<div id="sliderB" class="slider"></div>

<!-- these would be type="hidden" in final code, this is just for demo -->
<input type="text" class="field-group value_1" name="value_1" id="value_1" value="50" />
<input type="text" class="field-group value_2" name="value_2" id="value_2" value="0" />
<input type="text" class="field-group value_3" name="value_3" id="value_3" value="0" />

.field-group {
  clear: both;
  float: none;
  display: block;
  width: 50%;
  margin: 1em auto;
}

.slider {
  margin: 20px;
}

and the fiddle: Edit fiddle - JSFiddle[^]

can you help me with that? what i want to achieve is always to keep the sum of input values to 100. So if in input1 i have value 50, then for rest two inputs i have 50 to split. if in input1 i have e.g. 70, then in rest fields we have 30 to split.

it's up to the user choice what will be detailed split between field 2nd and 3rd.

thanks!