BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Guide

Filter Range Pro

How to set up and style the Filter Range widget in Elementor.

Filter Range is a slider with two handles and number boxes. Use it for the WooCommerce product price or for any number custom field, such as a rating or a size.

Part of: Bright Addons Pro. Before you start: A Loop Grid or Loop Carousel with a Query ID on the same page (Bright Addons Pro).

Set it up

  1. Add a Loop Grid or Loop Carousel and type a Query ID in its Layout section, for example blog-grid.

  2. Add the Filter Range widget from the Bright Addons Filters category.

  3. Under Filter, choose Filter By and, for a custom field, its Custom Field Name.

  4. Set Lowest Value, Highest Value, Step and the text around the number.

  5. Type the same Query ID in Connect to Query ID.

  6. Publish the page and try the filter on the live page.

Content options

Filter

Option What it does
Connect to Query ID The Query ID of the Loop Grid or Loop Carousel this filter controls.
Title Optional heading above the filter, with Title HTML Tag.
Filter By Product price (WooCommerce) or A number custom field.
Custom Field Name The meta key of a number field.
Lowest Value Empty uses the lowest value on the site.
Highest Value Empty uses the highest value on the site.
Step How much one move of a handle changes the value.
Before the Number Text before the value, such as $.
After the Number Text after the value, such as km.
Number Boxes Shows boxes to type the values.
Bright Addons Pro

Unlock this and 90+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $10 a year, with a 14-day money-back guarantee.

Style options

These sections are in the Style tab.

  • Title

    typography, color and spacing of the heading.

  • Items

    accent color, space between items, text typography and colors, background, border, radius and padding, with hover and active colors.

Tips

  • Custom fields whose name starts with an underscore are private and cannot be used.

  • Only number fields chosen in a Filter Range widget on the same page can be filtered, so other fields stay private.

  • Give the Loop Grid or Loop Carousel a Query ID in its Layout section first, then type the same Query ID in Connect to Query ID.

Questions and answers

Does the page reload when a visitor uses the filter?

No. The connected loop widget loads the new results in place, and the other filters update to match.

Can I use an ACF number field?

Yes. Type the field name in Custom Field Name.

Can I filter an archive that uses Current Query?

No. Archives built on the current query use normal page links. Choose a source such as Posts or Products in the loop widget to filter it.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides