CODEWITHSUNDEEP
javascriptjquery
Tom Whitaker
Tom Whitaker

Reputation: 117

jQuery Slider calling another function

I am a bit of a newbie with jQuery sliders, so please bear with me!

I want to call my updateData(input) function with different input depending on the slider value, but have found that when I use if statement, it only allows one condition:

<div id="slider"></div>

<script>
$('#slider').slider({
    orientation: 'horizontal',
    step: 5,
    value: 0,
    animate: true,
    slide: function(event, ui) {
        if(ui.value > 50){
            updateData("data/commodities3.json")
        }
        else if(ui.value > 75){
            updateData("data/commodities2.json")
        }
    }
});
</script>

Any advice on how to accomplish this would be appreciated. Thanks.

Upvotes: 1

Views: 627

Answers (3)

Tom Whitaker
Tom Whitaker

Reputation: 117

@mtaube, @joelrobichaud, thanks for your help, I managed to figure it out using a combination of your answers!

<slidertitle>Pages</slidertitle>
      <div id="slider"></div>


    <script>
    $('#slider').slider({
      orientation: 'horizontal',
      step: 5,
      value: 0,
      animate: false,
      change: function(event, ui) {
       if (ui.value > 75) {
        updateData("data/commodities3.json")
        }
          else if(ui.value > 50){
           updateData("data/commodities2.json")   
          }

      }
    });


    </script>

Upvotes: 0

bogeylicious
bogeylicious

Reputation: 5160

If I'm understanding correctly, I think you need to reformat your if statements.

As you currently have it, the else if statement will never be executed because any value > 75 is also > 50.

I think you want something like this:

if (ui.value > 75) { DO SOMETHING }
else if (ui.value > 50) { DO SOMETHING ELSE }

Upvotes: 0

joelrobichaud
joelrobichaud

Reputation: 665

Your problem is all about how you define your conditions. Obviously, if you catch everything that is above 50 first, then it won't go through the trouble of checking the else condition.

Checking against the biggest number first would solve this issue :

if (ui.value > 75) {
    updateData("data/commodities2.json")
} else if (ui.value > 50) {
    updateData("data/commodities3.json")
}

Upvotes: 1

Related Questions