[Resolved] Customizing block editor search filters with JQuery

[Author]

Posts

[RensV5812]

Hi guys,

I have designed a view with custom search using the block editor. This worked great. However, I'd like to make a few customizations that currently aren't possible using the block editor alone, and I just need a little bit of direction.

I've read this support thread:
https://toolset.com/forums/topic/range-slider-of-custom-field/

I'm wondering how I should access and manipulate the Min and Max input fields. This is what the 'minimum salaris' field html looks like on the front end:

<input type="text" id="wpv_control_textfield_wpv-wpcf-salaris_min" name="wpv-wpcf-salaris_min" value="" class="js-wpv-filter-trigger-delayed form-control">

So what's the best way to reference this field? Should I use "#wpv_control_textfield_wpv-wpcf-salaris_min" like the below code?

jQuery(document).ready(function(){
jQuery("#price-slider").slider({
    range: true,
    min: 0,
    max: 1000000,
    step: 10000,
    values: [0, 1000000],
    slide: function(event, ui) {
        jQuery('#wpv_control_textfield_min-price').val(formatNumber(ui.values[0]));
        jQuery('#wpv_control_textfield_max-price').val(formatNumber(ui.values[1]));
}});
jQuery('#wpv_control_textfield_min-price, #wpv_control_textfield_max-price').change(function() {
    jQuery('#price-slider').slider('values', [parseInt($('#wpv_control_textfield_min-price').val()), parseInt($('#wpv_control_textfield_max-price').val())]);
});
});

Once that's is done should I hide the input fields using CSS?

Finally, how would I include the required JQuery file, as mentioned in the referenced support thread?

Thanks a ton,
Rens

[Minesh]

Hello. Thank you for contacting the Toolset support.

The first thing the help you are asking is for a custom code that is beyond the scope of our support policy. Please note that as a supporter we are not allowed to support such custom edits.

To clarify the things, you added custom jQuery script to build your slider but this needs lot of custom programming. As you can see with the reference ticket you shared, the client has posted his last reply that he was not able to integrate the jQuery slider and he started using another one: https://toolset.com/forums/topic/range-slider-of-custom-field/#post-610905

The request where you need help is pure custom programming request and I'm afraid I could not help much with that. if you need further help with your custom code, you are welcome to contact any of our certified partners with the following link:
=> https://toolset.com/contractors/

[RensV5812]

My issue is resolved now. Thank you!