[Resolved] Price range slider stops working after loading search results

[Author]

Posts

[toolset-dave]

Hi,

I continue in previous thread (https://toolset.com/forums/topic/price-range-slider-and-fields/), but a new problem arised, so I created this post.

The Custom search is here: hidden link
The Slider I am using: hidden link

I have a price range slider, which works correctly when I first load the page. After changing the price on slider or anything from searching parameters, the new search results will show, but the slider will not work. With Luo´s help I repaired disappearing the slider after searching, but I don´t know how to make it 100% functional (when I move with the slider, the prices do not update).

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function(slideEvt5) {
  	$("#cenovy-rozsah").slider();
});

[Christian Cox]

You must re-initialize the slider, as well as the slider event handlers, after the results are updated. I would create a reusable function for this:

function initSlider() {
$("#cenovy-rozsah").slider();
$("#cenovy-rozsah").on("slide", function(slideEvt) {
	$("#hodnota-slideru-min").text(slideEvt.value[0]);
});

$("#cenovy-rozsah").on("slide", function(slideEvt2) {
	$("#hodnota-slideru-max").text(slideEvt2.value[1]);
});

$("#cenovy-rozsah").on("slideStop", function(slideEvt3) {
	jQuery('.js-wpv-filter-trigger').first().trigger('change');  // trigger ajax update
});

$("#cenovy-rozsah").on("slide", function(slideEvt4) {
	$('input[name="wpv-wpcf-cena-min"]').val(slideEvt4.value[0]);
    $('input[name="wpv-wpcf-cena-max"]').val(slideEvt4.value[1]);
});
}

// initialize on first page load
initSlider();

// initialize again after results are updated
$( document ).on( 'js_event_wpv_parametric_search_results_updated', initSlider);

[toolset-dave]

Hi, thank you for changing the code, the slider works after updating the search results now. But it´s not working 100%. I found out that this function will set the numbers (i.e. 500 and 1000) for slider after update:

$("#cenovy-rozsah").slider('setValue', [500,1000]);

But I don´t know how to get the wpv-wpcf-cena-min and wpv-wpcf-cena-max prices back into the slider instead of the given [500,1000].

[Christian Cox]

Use jQuery.val() to access the numbers in the min and max inputs:

var min = $('input[name="wpv-wpcf-cena-min"]').val();

Then pass the min and max variables into your slider setValue function instead of 500,1000.

hidden link

[toolset-dave]

Thanks for the link. I still have some problem with it. At first I had to convert variable string into integer. But I don´t know why the code works fine only for max amount, not for min amount (it gives me NaN output):

function initSlider() {
$("#cenovy-rozsah").slider();
  var minbefore = $('input[name="wpv-wpcf-cena-min"]').val();
  var min = parseInt(minbefore);
  var maxbefore = $('input[name="wpv-wpcf-cena-max"]').val();
  var max = parseInt(maxbefore);
$("#cenovy-rozsah").slider('setValue', [min,max]);
$("#cenovy-rozsah").on("slide", function(slideEvt) {
    $("#hodnota-slideru-min").text(slideEvt.value[0]);
});
 
$("#cenovy-rozsah").on("slide", function(slideEvt2) {
    $("#hodnota-slideru-max").text(slideEvt2.value[1]);
});
 
$("#cenovy-rozsah").on("slideStop", function(slideEvt3) {
    jQuery('.js-wpv-filter-trigger').first().trigger('change');  // trigger ajax update
});
 
$("#cenovy-rozsah").on("slide", function(slideEvt4) {
    $('input[name="wpv-wpcf-cena-min"]').val(slideEvt4.value[0]);
    $('input[name="wpv-wpcf-cena-max"]').val(slideEvt4.value[1]);
});
}
 
// initialize on first page load
initSlider();
 
// initialize again after results are updated
$( document ).on( 'js_event_wpv_parametric_search_results_updated', initSlider);

For example if I write number instead of min variable

$("#cenovy-rozsah").slider('setValue', [0,max]);

the slider works well.

[Christian Cox]

If you try to parseInt an empty string, the results is NaN:

parseInt(''); // Nan

So you're probably trying to parseInt an empty value. Return 0 instead of parseInt(minbefore) in this case.

var min = minbefore == '' ? 0 : parseInt( minbefore );