I have set up a range slider that should show/hide divs based on their range values - meaning if the range of the one specifies in the div falls into the selected range in the slider it should show - the others hide. Somehow it does not work correctly - if anybody could help that would be greatly appreciated.

My code so far:

$("#slider").slider({ range: true, min: 150, max: 280,
step: 5, values: [150, 280],
slide: function(event, ui) {

$("#amount").val('Min. Value' + ui.values[0] + ' - Max. Value' + ui.values[1]); }, change: function(event, ui) {

$('#col-2 div').each(function(){ var valueS = parseInt($(this).attr("class")); var valueX = parseInt($(this).attr("title"));

if (valueS < ui.values[0] && valueX <= ui.values[1] || valueS > ui.values[0] && valueX >= ui.values[1] ) { $(this).stop().animate({opacity: 0.25}, 500)

} else { $(this).stop().animate({opacity: 1.0}, 500) $("#amount").val('Min. Value' + ui.values[0] + ' - Max. Value' + ui.values[1]); }
});
} });

$("#amount").val('Min. Value' + $("#slider").slider("values", 0) + ' - Max. Value' + $("#slider").slider("values", 1));

});

I have also posted a sample at: http://www.webdesigneroakland.com/slider/444range_slider.html