Filter on Numeric Ranges

Imagine a sales team application with a page listing all current opportunities—and the monetary value of each. The team manager wishes to filter the opportunities by amount to determine where the team’s attention should be focused.

Skuid provides a specific filter type (Numeric Range) that displays a filter designed explicitly for numeric input. However, if the manager wants something more complex, that’s also possible by using the Select option filter type.

Use the examples below as templates to build your own filters.



The examples below assume a Skuid page with:

  • a functioning model on an object that collects opportunity data. (In this example, we use Salesforce’s Opportunity object).

  • a Table component that model with fields for:

    • Name
    • associated account, i.e. AccountID
    • Amount
    • Created Date and Closed Date
    • Owner ID

If using a different data source, the field names indicated may be different.

Numeric Range Filter with Auto-generated Conditions

The simplest way to let the manager filter by opportunity amounts is using the Numeric range filter type with conditions autogenerated by Skuid. (The builder does not have to pre-configure conditions to make the filter function.)

The goal? A filter that allows users to fill in “minimum” and “maximum” opportunity amounts and filter for all records within that range. This lets the manager select the opportunity values to display. For example, they can look for opportunities whose amounts fall between $50,000 and $150,000—or opportunities whose amounts fall between $86,000 and $93,000, or any other set of figures.


Build the filter [[]]

Create a filter with autogenerated conditions to display records that fit within a user-entered set of “minimum” and “maximum” numeric values.

On the Table component, click Add features > Table filter, then configure the filter:

  • Filter type: Numeric range
  • Filter method: Server
  • Pick options and conditions: Automatically
  • Numeric field: The field with the amount of the opportunity (in this case, the Opportunity object’s Amount field.)
  • Show label above filter: Yes, use field’s label.

Numeric Range Filter with Builder-generated Conditions

While using the Numeric Range filter that generates its own conditions is the fastest and easiest way to filter along a numeric range, if you need more specificity, Numeric Range filters can also work with builder generated conditions.

To do this, create a pair of conditions on a numeric field: one to represent the lower part of the numeric range and one to represent the higher part. When setting up the condition, use the following operators:

  • For the condition on the lower part of the numeric range, use >= (Greater than/equal to).
  • For the condition on the higher part of the numeric range, use <= (Less than/equal to).

Then be sure to set the filter’s Pick options and conditions to Manually so you can use those two conditions for the (Start of range) Model condition to affect and (End of range) Model condition to affect properties.

Other ways to filter on numbers

The two previous examples use the pre-configured Numeric range filter type to build a filter that sifted records by a number value, in this case, by amount.

Another alternative is to use the Select option filter type–even though we are working with numbers—to create a filter drop-down that presents specific numeric ranges (which are controlled by different model conditions). To learn more, see Use Select option to Filter on a Numeric Range.