[Resolved] Price range slider and fields

[Author]

Posts

[toolset-dave]

Hi,

I continue from https://toolset.com/forums/topic/price-range-slider/.

I have a price range slider, but I still cannot connect it with fields for price:

<div class="form-group">
	<label>Cena od</label>
	[wpv-control field="wpcf-cena" url_param="wpv-wpcf-cena-min" type="textfield"]
</div>
<div class="form-group">
	<label>Cena do</label>
	[wpv-control field="wpcf-cena" url_param="wpv-wpcf-cena-max" type="textfield"]
</div>

See hidden link

Slider code:

<input id="cenovy-rozsah" data-slider-id="muj-slider" type="text" value="" data-slider-tooltip="hide" data-slider-min="0" data-slider-max="[wpv-view name="nejvyssi-cena-kurzu"]" data-slider-step="100" data-slider-value="[0,[wpv-view name="nejvyssi-cena-kurzu"]]">

jQuery:

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

I have set it up to work with AJAX and it also work with text inputs for testing purposes, but not with price max and min fields.

[Luo Yang]

Dear Dave,

It is a custom codes problem, you will need to use the "range slider" to update the value of text fields "wpv-wpcf-cena-min" and "wpv-wpcf-cena-max", I have modified the JS codes you mentioned above as below:

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

Please check if it is fixed, thanks

[toolset-dave]

Hi Luo,

thank you so much for fixing the code, it works. But new problem arised. When I change the price on slider or anything from searching parameters, the new search results will show, but the slider disappears.

There is the page of the slider: hidden link

[Luo Yang]

You are using AJAX search feature and custom JS codes to setup the range slider, so you will need to trigger the custom JS codes after the AJAX search is completed, see similar thread here:
https://toolset.com/forums/topic/trigger-js-event-after-ajax-filtering-finished/

Since it is a new question, if you still need assistance for it, please create new thread for new question, that will help other users to find the answers.

[toolset-dave]

OK, this issue is resolved. I will create separate thread with the second question.