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
