質問

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" ) );
  });
役に立ちましたか?

解決

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

他のヒント

Here you can find a very good example.

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top