Slider Range Filtering

[JacklynWyatt]

Is an example available for filtering using a slider range, which supplies a min/max value for a given column? I have attempted to leverage the given max-price example but to no avail. It would be ideal if I could simply add a query directly from the slider on change function, which already exists. Thanks.

[JangoSteve]

Hi @JacklynWyatt, I'd take a look at the second example in the Querying section in the docs. Fundamentally, I think what you're trying to do should be almost identical in implementation to how the second Volkswagen/Ford/Mini example binds the filtering to the "Max Price" input field.

If you right-click and inspect source on that example, the JavaScript code for it is this:

(function() {
  $('#search-function-example')
    .bind('dynatable:init', function(e, dynatable) {
      dynatable.queries.functions['max-price'] = function(record, queryValue) {
        return parseFloat(record.price.replace(/,/,'')) <= parseFloat(queryValue);
      };
    })
    .dynatable({
      features: {
        paginate: false,
        recordCount: false,
        sorting: false,
        search: false
      },
      inputs: {
        queries: $('#max-price')
      }
    });
})();

[JacklynWyatt]

@JangoSteve Thank you. Unfortunately, I had no luck getting that to work at all and I wonder if it might be related to this other issue I came across... #220 Plus the slider itself with range values gets a little awkward to work with.

Instead, I added in a condition within that .run function to check for a specific query being passed. So, on the slider change, I would call the queries.add() function, pass through the value, and handle it within the dynatable js function of .run for queries. It basically turned into this around line 1145:

if (_this.functions[query] === undefined) {
    if (query == "distanceMin") {
        _this.functions[query] = function(record, queryValue) {
                return record[query] >= queryValue;
              }
    } else if (query == "distanceMax") {
        _this.functions[query] = function(record, queryValue) {
                return record[query] <= queryValue;
              }
    } else {
        _this.functions[query] = function(record, queryValue) {
                return record[query] == queryValue;
        }
    }
}

I have two duplicate hidden fields of distance within my data, which I add using the _rowReader and it then filters the list as it should on change of the slider, passing through its values.