I think you need to initialize your slider AFTER it is rendered. None of the DOM elements you create after your initial render will be intialized or bound by javascript you have already run.
So, 1st Encapsulate your initialization in a function:
function initSlider(passedMin, passedMax)
{
$("#slider-range").slider({
range: true,
min: passedMin,
max: passedMax,
values: [selectedMinValue, selectedMaxValue],
values: [selectedMinValue, selectedMaxValue],
slide: function (event, ui) {
//Note: Currency Custom formatting is not supported.
$(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[0]);
$(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[1]);
},
change: function (event, ui) {
var url = removeParameter('@(currentURL)', "price");
var newUrl = url.replace(/&/g, '');
if (isAjaxRequest) {
callAjax(UpdateQueryString("price", ui.values[0] + "-" + ui.values[1], newUrl));
}
}
});
isAjaxRequest = true;
$(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 0));
$(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 1));
}
}
Then in your AJAX, call your init function on success
$.ajax(
{
url: url,
type: 'POST',
success: function (result)
{
// Result is in html
$('#catalog').replaceWith(result);
$('#ajax-loading').hide();
DisplayFilter();
//Lazy Loading
$("img.lazy").show().lazyload(
{
effect: "fadeIn"
});
$(window).trigger("scroll");
initSlider(newMin, newMax)
}
});