Skip Navigation

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

This support ticket is created 5 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 20 replies, has 2 voices.

Last updated by Himanshu Agarwal 5 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#1184362

I cannot see the search filter control anywhere in this View. Please refer to my previous instructions. 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.

Remove this code:

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

Do not manually trigger change events on the max / min input fields.

#1184830

As you suggested I have added a text search filter control and its not adding class js-wpv-filter-trigger, its adding js-wpv-filter-trigger-delayed.

And not effecting result update.

I tried with manually enter value in field and also with this code

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(".js-wpv-filter-trigger-delayed").val(formatNumber(ui.values[0]));
       jQuery(".js-wpv-filter-trigger-delayed").val(formatNumber(ui.values[1]));
}});
jQuery(".js-wpv-filter-trigger-delayed, .js-wpv-filter-trigger-delayed").change(function() {
  jQuery("#daslider").slider("values", [parseInt($(".js-wpv-filter-trigger-delayed").val()), parseInt($(".js-wpv-filter-trigger-delayed").val())]);
});
});

But its not working at all.
Please provide me a working solution.

#1185129

Please provide me a working solution.
No, I will not provide a working solution for you. I've already explained that this type of customization is not supported. If you have a question about one specific piece of code, I will try to answer it. I will not create this code for you, per our support policy here: https://toolset.com/toolset-support-policy/

#1185683

"If you have a question about one specific piece of code"

I have already provided you different codes and made changes as you suggested but still its not working.

I am just asking for your support to make it possible.

If is there any changes required or need to try I will do just guide me to make it possible.

#1186047

I am just asking for your support to make it possible.
No, I cannot do that. This is outside the scope of support we provide.

#1199097

My issue is resolved now. Thank you!