Filtering by a range

[ahollenbach]

I'd like to filter by a range, rather than just the direct values (e.g. filter by name A-L, M-Z). I've hooked it up to a jquery ui slider for price, and on slider change, I run through the list (filtered or unfiltered) and identify all the list elements that fit within the range. Is there any way to adapt this to make the non-matching elements hidden just like a standard Filtrify filter? Thanks.

Here's the simple js I've implemented in terms of filter.

$(".listElement").each(function () {
                var cost = $(this).attr("data-rangeFilterElement");
                if (cost < val2 && cost > val1) {
                           //Add to list of matched elements / do something

val1 and val2 are the lower and upper limits, respectively.

The union of the filtrify existing matched elements and my matched elements would be the elements I would like to display.

[luis-almeida]

Hi!

In Filtrify's callback function you have access to collections of matched and mismatched elements. You also have an option not to hide the the matched elements So you could do smth like this:

$.filtrify("containerID", "placeHolderID", {
  hide : false, // don't hide the elements
  callback : function (query, match, mismatch) {
    // finish filtering here
    // when you're done, show the result and hide the mismatches
  }
});

Hope it helped!

[ahollenbach]

Thanks for the help (and I love Filtrify)! To anyone in the future, I simply added a filter class to each element that matched the range, then called

container.isotope({ filter: '.someFilter' });

to hide all the ones that did not match (assuming you are using Isotope).

[luis-almeida]

I didn't know you were using isotope. It's as simple as that :)

[povilas123]

Hello, maybe someone can give working example. Because i still can't it make work. Need Filtrify Isotope + jquery ui slider

Thank you