Back to contents

JetSmartFilters: How to Create Range Filter


This tutorial describes the process of creating a Range filter from a scratch with JetSmartFilters plugin.

JetSmartFilters has several types of filters that allow the visitor to specify the search for some definite parameters.

The Range filter allows setting a certain range with a slider. The user can move the slider and choose the value. After that, the items will be sorted to fit the range from the smallest value to the one chosen by the user. For example, those values can be prices for WooCommerce store pages.

Alternatively, you can filter JetEngine posts of some Custom Post Type with numeric values in the meta fields, such as the number of rooms in the flat, the number of people in the flight tickets, etc.

So, let’s look through the Range filter creation process.

How to create Range filter

1 Step — Name the filter

Go to WordPress Dashboard > Smart Filters and click the “Add New” button. Fill out the Title, Filter Label, and Active Filter Label fields.

range filter name label active label

After that, you should choose the “Range” option in the Filter Type dropdown menu.

range filter type

2 Step — Define the settings of a Range filter

The features that will appear after choosing the range filter type allow you to set all the parts of the filter:

  • Inputs enabled. If you turn this toggle on, the input bars will appear under the range and the users will be able to set the max and min value manually, by typing the numbers into the bars;
  • Values prefix and Values suffix allow you to add the prefix and suffix to the numeric value of the range filter. It can be a text, or a currency sign, whatever that suits your needs;
  • Thousands separator field allow you to make the numbers look more customized to the visitors of your site. For this purpose, you can choose the comma, mark, or space (to allow space you should enter the &nbsp special symbol);
  • Decimal separator gives you the opportunity to set the decimal point in the values, if you need it;
  • Number of decimals field value will define how many numbers will be shown after the decimal point;
  • Min and Max Value is where you define the range – from the smallest value to the biggest;
  • Step feature sets how the value will change when the user moves the slider to one position. Be aware, that the lower is the Step value, the more exactly the visitor is able to tune the range;
  • Get min/max dynamically drop-down menu has two options. If you choose the default option, the range won’t be set dynamically but taken from the Min and Max Value fields. And if you choose WooCommerce min/max prices option the range will be set automatically according to the products’ min and max price. Keep in mind, that you have to install the WooCommerce plugin to use the second option.
range filter settings

In the Query Variable field, you need to put in the necessary meta field slug (this meta field will become the source of the range values). For example, you can specify the “_price” meta field name to allow working with the Price range. You can filter the items by any numeric meta field you want.

query variable settings

In the end, click on the “Publish” button to save all the changes and then go to the Elementor editor to apply the filter to the content.

How to create Range filter for publications

Follow the instruction above, but remember to set the preferable values in the Min Value, Max Value and Step field. It is obligatory for filtering the publications.

How to create Range filter for publications

How to create Range filter for products

Read about it in our tutorial where we enlarged on the point of Price Range Filter as the most frequently used type of Range filter for products.

How to create Range filter for products

Now, you know how to create Range filter not only for Woocommerce pages but also for JetEngine posts, if they have the numeric value to be filtered.