Click here to Skip to main content
15,851,242 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:

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


});


HTML
<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" />


CSS
.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!
Posted

1 solution

Try something like this:
JavaScript
$('#sliderA').slider({
    min: 50,
    max: 100,
    change: function(e, ui) {
        $('#value_1').val(ui.value);

        var max = 100 - ui.value;
        $('#sliderB').slider("option", "max", max);

        var value = $('#sliderB').slider("option", "value");
        $('#sliderB').slider("option", "value", Math.min(value, max));
    }
});

$('#sliderB').slider({
    min: 0,
    max: 50,
    change: function(e, ui) {
        $('#value_2').val(ui.value);
        
        var max = $(this).slider("option", "max");
        $('#value_3').val(max - ui.value);
    }
});

Edit fiddle - JSFiddle[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900