Jquery UI sliders - 2 working together to calculate an amount

Question

I've got 2 Jquery sliders and when I get them working together they break. The first slider measures weight, and the second exercise. I'm trying to code a final value, the 'outcome' the displays the outcome of both.

When the 1st weight slider increases, so does the outcome value. When the 2nd exercise slider increases, the final outcome goes down. I'm just using simple number values until i get my head around it, how do I get them working together?

$(function() {
    $( "#slider_1" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( "+" + ui.value );
      }
    });
    $( "#amount" ).val( "+" + $( "#slider_1" ).slider( "value" ) );
  });
  $(function() {
    $( "#slider_2" ).slider({
      value:100,
      min: 0,
      max: 9,
      step: 5,
      slide: function( event, ui ) {
        $( "#amount2" ).val( "+" + ui.value );
      }
    });
    $( "#amount2" ).val( "$" + $( "#slider_2" ).slider( "value" ) );
  });

score 1 · Accepted Answer · answered Jul 25 '13 at 16:48

1

I have created a simple example which will hopefully help JSFiddle. I think one of the issues was your initialization of the second slider so I have changed it to default to 0 and have a step of 1.

HTML

 <div id="slider_1"></div>
 <div id="slider_2"></div>
 <input id="amount"></input>

Javascript

$(function() {

var weightSliderValue = 0;
var exerciseSliderValue = 0;

function changeValue(){
    var currentSliderValue = weightSliderValue - exerciseSliderValue;
    $( "#amount" ).val( currentSliderValue );

}

$( "#slider_1" ).slider({
  value:100,
  min: 0,
  max: 500,
  step: 50,
  slide: function( event, ui ) {
      weightSliderValue = ui.value;
      changeValue();
  }
});

$( "#slider_2" ).slider({
  value:0,
  min: 0,
  max: 9,
  step: 1,
  slide: function( event, ui ) {         
      exerciseSliderValue = ui.value;
      changeValue();
  }
});

});

Each slider move sets its corresponding variable then calls changeValue. This function is where you could create a more complex function to relate the two value for the moment I have just subtracted exercise from weight. I hope this helps

answered Jul 25 '13 at 16:48

SCraft

59
2

That's great SCraft, thanks. I think I'd want the values of each of the 2 slidersr to be displayed as well as just the results, i'll have a play around with it. thanks again. – John Cooper Jul 26 '13 at 10:34
No problem happy to help if you want me to extend it any more. If you wish to also display the results of independent sliders you could make use of the two variables that store current slider value. I'm trying to build my reputation on stackoverflow so I'd really appreciate it if you could mark this as an acceptable answer if you have found it useful. – SCraft Jul 26 '13 at 10:44
I'm new to Stackoverflow too, just getting my head around this. I've tried modifying it to get the three values to display separately in input fields (slider1, slider 2 and overall outcome), but I'm still not quite getting it, would you mind modding it? – John Cooper Jul 29 '13 at 10:53
Thanks so much for your help. I've modded the JSfiddle http://jsfiddle.net/sNgR4/8/ but still cant get the values showing in all fields? – John Cooper Jul 29 '13 at 12:11
Hi, I hope this helps [jsfiddle](http://jsfiddle.net/sNgR4/9/). One thing to remember is that if you are giving your elements ID's then they need to be unique. I've chosen to use the global variables which get set when a slider value changes to update the edit box's. Just for future reference another way to access the value of the slider is `var value = $('#slider-ID').slider("option", "value");` – SCraft Jul 29 '13 at 20:46

score 0 · Answer 2 · edited Jul 25 '13 at 17:22

0

Here you can find a very good example.

edited Jul 25 '13 at 17:22

DontVoteMeDown

21,122
10
69
105

answered Jul 25 '13 at 16:56

Aarón Cárdenas

342
3
11

Jquery UI sliders - 2 working together to calculate an amount

2 Answers2