[Resolved] How to create a range slider filter for a view?

[Author]

Posts

[Himanshu Agarwal]

I have a custom field and i want to filter the view by this custom field with min and max values.

But i want that the filter input as range slider like this

hidden link

In this slider min and max values fixed like 10-100 and when i change the slider view will be changed

I mean if set the range in slider from 11 to 30 then show the data which values is between the 11 to 30 in custom field.

I tried with below code but nothing is happen. I also checked the error in console but no error is there

Filter code :-
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
<div id="num-slider"></div>
[wpv-control-postmeta field="wpcf-num" type="textfield" url_param="wpv-wpcf-num_min"]
[wpv-control-postmeta field="wpcf-num" type="textfield" url_param="wpv-wpcf-num_max"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

Scripts and styles added:-

wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/js/jquery-ui.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/jquery-ui.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/jquery.js', array ( 'jquery' ), 1.1, true);

Custom script added in as footer script in theme setting:-

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

Please help me to get a range slider to filter the view.

[Christian Cox]

Hi, filter customizations are technically outside the scope of support we provide here in the forums. With that being said, there is some advice in another ticket you may find useful:
https://toolset.com/forums/topic/range-slider-of-custom-field/

If there is a specific piece of code you are having trouble with, I can offer more direct assistance.

[Himanshu Agarwal]

I already given code that I tried for.

Here I am giving you my code again that I tried.

Filter code :-

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
<div id="num-slider"></div>
[wpv-control-postmeta field="wpcf-num" type="textfield" url_param="wpv-wpcf-num_min"]
[wpv-control-postmeta field="wpcf-num" type="textfield" url_param="wpv-wpcf-num_max"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

Scripts and styles added:-

wp_enqueue_style( 'slider', get_stylesheet_directory_uri() . '/js/jquery-ui.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/jquery-ui.js', array ( 'jquery' ), 1.1, true);
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/jquery.js', array ( 'jquery' ), 1.1, true);

Custom script added in as footer script in theme setting:-

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

Please help me to get what mistake i am doing for making a range slider filter in the view.

[Himanshu Agarwal]

I also tried adding custom script in JS panel of view.

[Himanshu Agarwal]

One more update,

If I do not use any field for search then range slider is appearing, i mean when i used only this code:-

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div id="num-slider"></div>
[/wpv-filter-controls]
[wpv-filter-end]

then range slider isappearing but when I am using below code only search fields are showing.

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
<div id="num-slider"></div>
[wpv-control-postmeta field="wpcf-num" type="textfield" url_param="wpv-wpcf-num_min"]
[wpv-control-postmeta field="wpcf-num" type="textfield" url_param="wpv-wpcf-num_max"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

My custom script is same.

[Christian Cox]

Where can I see it in the browser?

[Himanshu Agarwal]

hidden link

Here you can check in right of the page that fields are showing but Jquery for slider is not working.

I check the slider jquery and custom script in single page where it is working, this mean that code is okay.

You can check this here

hidden link

Please check what the conflict is?

[Christian Cox]

There are two divs with the same ID "daslider" in the DOM. I'm attaching a screenshot here. When you call jQuery('#daslider').slider(), only the first one is being initialized. That slider is hidden.

My guess is that you have split this View into separate shortcodes, trying to show the filters and results separately. For better results, do not split the View into separate shortcodes like this. Output the filters and results together, with one View shortcode. If you need to build columns or other markup that separates these sections, built it in the Loop Editor. Otherwise, you'll have to rewrite the slider initialization code to work with multiple sliders in the DOM.

[Himanshu Agarwal]

Thank you so much Christian for your help.

As you suggested I do not split the View into separate shortcodes and output the filters and results together, and range slider is appeared now.

But in change slider its not effecting the result. So i used this code that you mentioned in another ticket:-

jQuery(".js-wpv-filter-form-18-TCPID2 .js-wpv-filter-trigger").first().trigger("change");

But if add this code in document.ready it changing automatically, update the result and slider is disappear.

like this:-

jQuery(document).ready(function(){
jQuery(".js-wpv-filter-form-18-TCPID2 .js-wpv-filter-trigger").first().trigger("change");
}); 

so i also tried below

jQuery(document).ready(function(){
jQuery(".js-wpv-filter-trigger").change(function () {    
jQuery(".js-wpv-filter-form-18-TCPID2 .js-wpv-filter-trigger").first().trigger("change");
});  
  });

But by this result is not updating.

Please help me one more time to make it possible that range slider effect the update search result and after result update range slider must not disappear.

[Christian Cox]

I see you are using AJAX updates. This means every time the search results are updated, the entire View markup is replaced in the DOM. So the slider you initialize when the page first loads no longer exists after the results are changed, it has been replaced with new input filters. To fix that, you must initialize the slider every time the search form is updated. There is a custom event you can use to trigger this:

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.view_changed_form (object) The jQuery object for the View form after being updated
	* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
	* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
	*/

	// you should initialize the slider here

});

There is a "Frontend Events" button in the Search and Pagination JS editor panel. You can use this button to insert different event handlers for Search and Pagination events. If you trigger an update inside this search form update event handler, you will create an infinite loop, so be careful when you trigger those change events.

[Himanshu Agarwal]

Thank you for update Christian.

Yes you are right its updating continuously the result.

So, I added same code in js panel of the view and in footer script of the theme.

That is

jQuery(document).ready(function(){
  var formatNumber = function(number)
{
    number += "";
    var parts = number.split('.');
    var integer = parts[0];
    var decimal = parts.length > 1 ? '.' + parts[1] : '';
    var regex = /(\d+)(\d{3})/;
    while (regex.test(integer))
    {
        integer = integer.replace(regex, '$1' + ',' + '$2');
    }
    return integer + decimal;
};
jQuery("#daslider").slider({
    range: true,
    min: 10,
    max: 100,
    step: 10,
    values: [10, 100],
    slide: function(event, ui) {
       jQuery("#wpv_control_textfield_wpv-wpcf-moz-da_min").val(formatNumber(ui.values[0]));
       jQuery("#wpv_control_textfield_wpv-wpcf-moz-da_max").val(formatNumber(ui.values[1]));
}});
jQuery("#wpv_control_textfield_wpv-wpcf-moz-da_min, #wpv_control_textfield_wpv-wpcf-moz-da_max").change(function() {
  jQuery("#daslider").slider("values", [parseInt($("#wpv_control_textfield_wpv-wpcf-moz-da_min").val()), parseInt($("#wpv_control_textfield_wpv-wpcf-moz-da_max").val())]);
});
});

Slider is working well, but result is not updating with the slider when i am using "update the result on field changes value", but result is updating when i am using "update the result when search button is clicked".

I tried by adding this code on different places like in js panel or footer script or in both.

 jQuery(".js-wpv-filter-form-18-TCPID2 .js-wpv-filter-trigger").first().trigger("change");

When we add this code in both it will be a continue loop as you mentioned, and if we add this in one of them in js panel or footer script its not working at all .

Please help me to make this possible that result must update with range slider change.

[Christian Cox]

I can't see the test anymore.

[Himanshu Agarwal]

Sorry, the link URL was updated.

hidden link

[Christian Cox]

Okay here is some advice:
- Remove the js-wpv-filter-trigger class from the div#daslider. This class should only be applied to standard input fields created by Types, not the slider.
- Insert a text search filter control in the Search and Pagination settings for this View. This field will have the js-wpv-filter-trigger class applied automatically, and it will be set up to respond to change events automatically.
- Wrap the text search filter control in a hidden div so it's not visible.
- Now the text search filter will trigger an AJAX update automatically when your slider is adjusted.

[Himanshu Agarwal]

I removed the class js-wpv-filter-trigger from div#daslider.

And added to two text fields, one for min and one for max.

But trigger is not working automatically and js-wpv-filter-trigger class is not added automatically to input fields, but class js-wpv-filter-trigger-delayed is added to input fields.

So i added this code in theme footer script.

jQuery(".js-wpv-filter-form-18-TCPID2 .js-wpv-filter-trigger-delayed").first().trigger("change"); 

But after this slider is not changing the value and giving a ajax error "TypeError: closestHandle is undefined".

And when i hit the enter after giving value manually in fields, result is updating.

I also tried with single field (condition is equal to) without any range slider but result is not updating when I entering the value manually.

Please help me to solve this.