Streaming live at 10am (PST)

MixitUp Integration - filtering a list by numeric range

I’m trying to use MixItUp to filter elements by price with a range slider and I’m struggling to figure out a solution to filtering by numeric values of one attribute on each item in a list that is rendered dynamically from CMS? For example, I want to filter out all entities with a “cost” field that equals greater than $100.

I have seen several previous issue posts on MitItUp’s Github (e.g. #473), but they all seem to solve the problem by adding a custom data attribute (e.g. data-cost) to each of the targets in a static content scenario. But this seems to be a solution primarily for static content (where adding the custom attribute would be possible), yet I haven’t been able to figure this out when the targets are coming from a CMS. Any help you could provide for this type of scenario?

function filterTestResult(testResult, target) {
var size = Number(target.dom.el.getAttribute(‘data-size’)); // <<-- HOW DO I DO THIS FOR ITEM FROM CMS TARGET???
var range = getRange();
if (size < range.min || size > range.max) {
testResult = false;
}
return testResult;
}

Anyone that could help out there?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)