Question

I’m trying to get my slider value to recognize it’s value and change an image. It’s a thumbs up, thumbs down concept on jquery’s default functionality . So, if a user slides over to the left (thumbs down), change the img css(opacity) to show which was selected.

I thought this would suffice, but it infact removes the slider completely.

if ui.value >= 51{
  $('img.up').css('opacity','.8');
  alert('cool');
}
if ui.value <= 49{
    $('img.down').css('opacity','.8');
    alert('too bad');
}

I made a fiddle here. How do I get the slider values to take effect?

I know I should probably ask/make another question as to why the sliders won’t generate in multiples. But if you have any advice, I’ll take that too.

Thanks for you help in advance.

Answer 1

You forgot to add parentheses in your if statement.

$('img.up, img.down').css('opacity','.4');
if (ui.value >= 51) {
  $('img.up').css('opacity','.8');
}
if (ui.value <= 49) {
  $('img.down').css('opacity','.8');
}

DEMO