Walt Walt - 1 month ago 12
jQuery Question

jQuery range slider switch

I have problem with switch statement. I have 2 jQuery sliders and I want to do something like:

if 1st slider value = 5 and 2nd slider value = 10 { print some text } else if (other values) { print some text }

I try with
if else
statements instead
switch
, same result.

HTML

<div class="wrapper ui-widget-content">
<div id="wo"></div>
<div id="w" class="weight"></div>
<p class="slider-title">Rider Weight</p>
<div id="io"></div>
<div id="inc" class="incline"></div>
<p class="slider-title">Incline</p>
<div id="m" class="miles"></div>
</div>


JavaScript

var weight = $('#w');
var incline = $('#inc');
var miles = $('#m');
$(function () {
$(weight).slider({
animate: "slow",
max: 250,
mix: 75,
step: 25,
range: 'min',
change: function( event, ui ) {
$('#wo').html(ui.value);
}
});

$(incline).slider({
animate: "slow",
max: 20,
mix: 0,
step: 5,
range: 'min',
change: function( event, ui ) {
$('#io').html(ui.value);
}
});

switch (miles) {
case $(weight).slider("value", 100) && $(incline).slider("value", 15):
$(miles).html("100 to 15");
break;
case $(weight).slider("value", 75) && $(incline).slider("value", 5):
$(miles).html("75 to 5");
default:
$(miles).html("nothing");
}
});

Answer

First, that's not how a switch works. You'll need an if/else if here.

Second, $(weight).slider("value", 100) is assigning the value 100 to the slider.

You want this format instead:

weight.slider('value') == 100

Third, you probably want to do your update every time each slider changes.

Comments