How to filter using numerical and date ranges

JFilters Ranges

Recently, we introduced new display types for filtering using numerical ranges. Also, it is already possible to filter between dates using the `calendar` display type. We are going to explore how to utilize those features.

Since version 1.14.0, the available filter settings in the backend, are relevant to the data type of the filter's data. When a filter is generated, JF registers its data type. For filters generated from custom fields, there are 2 different approaches, to trace the data type of a filter.

1. The type of the custom field.
For most custom field types, the default data type, is string/text. But for the "Integer" custom field is integer numbers.

2. For the "Text" custom field, you can define the data type, through the "Filter" setting.

That being said, for filters using numerical data types, you can utilize display types and settings bound to their data type. For filters using "Integer" numbers as data types, additional display types can be used that allows you to filter using numerical ranges.

If you changed your custom field's filter to Integer, but you don't see the Range Sliders and the Range Sliders with Inputs as available display types, we suggest to delete your filter and re-create it, using the Synchorinize button

After selecting any of the display types suitable for range filtering, you can define its relevant settings in the Basic tab.

JFilters range basic

From that tab, you can define the minimum and maximum values of the range. Then in the front-end you are able to filter using ranges.

jfilters range slider with inputs

Something similar applies to the "Calendar" display type, which is available for dates. Once you select the Calendar as display type, under the Basic tab you can set the Calendar Mode setting to "Date Range".  After doing so, you can select a range of dates through a calendar in the front-end.

jfilters date range

The use of ranges can advance the user experience, as instead of selecting among a long list of values, the user can define the limits of what he/she is looking for, with a very few moves. Hence reduce the time spent interacting with the filtering application and focusing on the results.

Follow us and get notified of our latest blog posts

Our favorite topics are about the Joomla's Custom Fields, Joomla Search and Filtering