Question: When a user slides the jQuery Slider over, it effects each image. How do I only get the images pertaining to that slider to change?

I've tried:
`$(this).closest('img.down')` and `$(this).siblings('img.down')`

```
$("#slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
    $('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');
    }
  }
});

```

[Fiddle here](http://jsfiddle.net/psybJ/5/) 

Thanks guys!

Answer: 
You need to make a change to your markup, ***you cannot have three items in a page with the same id***. You can make it

```
class="slider"

```

Move the initialization of the CSS outside of the function then traverse the markup to get the correct image:

```
$('img.up, img.down').css('opacity','.4');
$(".slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
  if (ui.value == 50) {
      $(this).parent().find('img.up, img.down').css('opacity','.4');
  }
  if (ui.value >= 51) {
      $(this).parent().find('img.up').css('opacity','.8');
  }
  if (ui.value <= 49) {
      $(this).parent().find('img.down').css('opacity','.8');
  }
}
});

```

<http://jsfiddle.net/psybJ/9/>
You really should replace "id" with "class" for your sliders. if you do that then this code will work fine: 

```
$(".slider").slider({
  value:50,
  min: 0,
  max: 100,
  step: 50,
  slide: function( event, ui ) {
    var parent = $(this).parent();
    if (ui.value >= 51) {
      $('img.up',parent).css('opacity','.8');
      $('img.down',parent).css('opacity','.4');
    }
    else if (ui.value <= 49) {
      $('img.down',parent).css('opacity','.8');
      $('img.up',parent).css('opacity','.4');
    }
  }
});

```