Range Filter

Create interactive range controls for Number fields. Perfect for price ranges, ratings, or any numeric range with beautiful sliders or dual inputs.

Perfect for: Number fields where users need to set min/max ranges like Price, Rating, Age, Size, or Score

How It Works

Range filters provide the best user experience for filtering numeric ranges. Users can set minimum and maximum values using interactive sliders or dual input fields.

Perfect for price ranges, rating filters, age ranges, or any scenario where users need to define a numeric range.

Setup Steps

  1. Add filter in property panel: Click "+" to add a new filter
  2. Choose "Range" type: Select Range from the filter type dropdown
  3. Select your field: Choose which Number field to filter (e.g., "Price")
  4. Set min/max bounds: Define the overall range (e.g., $0-$2000)
  5. Choose style: Range slider or dual inputs
  6. Add units: Show $ € or other units

Property Panel Settings

Configure the range filter in the property panel:

  • Filter Label: What users see (e.g., "Price Range")
  • CMS Field: Which Number field to filter
  • Min Value: Lowest possible value (e.g., 0)
  • Max Value: Highest possible value (e.g., 2000)
  • Step Size: How much values change (e.g., 10 for $10 increments)
  • Style: Range slider or dual inputs
  • Unit/Prefix: Currency or unit symbols

Style Options

Range Slider

Interactive slider with two handles for min and max values

Best for: Great user experience, perfect for price ranges and ratings

Dual Inputs

Two separate input fields for minimum and maximum values

Best for: When users need to enter exact values or wide ranges

Single Slider

One slider for setting a maximum or minimum value

Best for: When you only need upper or lower bounds

Use Cases & Examples

E-Commerce Pricing

Price ranges: $0-$500 slider for product filtering with currency display

Review Ratings

Rating ranges: 1-5 star range slider for filtering by review scores

Property Search

Square footage: 500-5000 sq ft range for property size filtering

Age Demographics

Age ranges: 18-65 range for demographic filtering

Tips & Best Practices

  • Range sliders provide the best user experience for numeric ranges
  • Set step sizes that make sense for your data (e.g., $10 for prices, 1 for ratings)
  • Use currency symbols ($, €) or units (sq ft, lbs) to make ranges clear
  • Consider the data range when setting min/max bounds - check your actual data
  • Dual inputs work better for very wide ranges or when precision matters