GuideForms
Login GuideForms PRO

Slider Step

The Slider step lets visitors filter by a numeric value — a price, distance, rating, or any other number. It renders as a smooth, draggable track with one or two handles depending on the mode. The Slider step is a Pro feature.

When to use a slider

Use a Slider step whenever the filtering criteria is a continuous number rather than a set of discrete options. Common examples: maximum budget, price range, minimum rating, distance radius, square footage, or weight. If the options can be counted on one hand (“Under $50 / $50–100 / Over $100”), cards might be a simpler choice.

Slider modes

The first setting when editing a Slider step is the Slider Type dropdown:

Single value

One handle on the track. The visitor drags it to set a single number — typically a maximum (e.g. “Up to $300”) or a minimum (e.g. “At least 4 stars”). The default filter operator is less than or equal, but you can change it to greater than, greater than or equal, less than, or equal.

Range (Min/Max)

Two handles on the track. The visitor sets both a lower and upper bound (e.g. “$200–$800”). The default filter operator is between. Alternative operators: between inclusive, outside, or outside inclusive.

Configuration fields

Step increment

Controls how much the value changes with each movement of the handle. Defaults to 1. Set it to 5 or 10 for large ranges (e.g. $0–$10,000), or to 0.1 for precision (e.g. ratings from 1.0 to 5.0). The increment also determines the snap points along the track.

Unit

An optional symbol or abbreviation displayed next to the value — for example $, €, km, kg, or %. Leave it empty if no unit applies.

Unit position

Choose whether the unit appears before the value (prefix, e.g. “$500”) or after it (suffix, e.g. “500 km”). Defaults to suffix.

Decorative images

Three optional image slots displayed in a row above the slider track. Use them to add visual context — for example, a small car, a medium car, and a large car to represent size. Each slot opens the WordPress Media Library. Images are displayed at a maximum of 80 × 60 pixels, evenly spaced across the width of the slider.

Filter mapping

Slider filters work differently from card filters. Only numeric data sources are available — fields like WooCommerce product price, ACF number fields, or custom meta fields that store numbers.

To add a filter:

  1. Click Add Filter.
  2. Choose a numeric source from the dropdown.
  3. Select an operator. Available operators depend on the slider mode:
    • Single value: less than, less than or equal, greater than, greater than or equal, equal.
    • Range: between, between inclusive, outside, outside inclusive.

Auto-detected min and max

When you select the first filter source, GuideForms queries your indexed data to find the actual minimum and maximum values for that field. These are used as the slider boundaries — you don’t need to set them manually. The detected range is shown below the filter for reference.

On the frontend, boundaries can adapt dynamically. For example, if a visitor selects “Laptops” in a previous Cards step, the price slider might show $300–$3,000 instead of the full $10–$10,000 range across all products.

How the slider looks on the frontend

The slider renders as a horizontal track with rounded ends. The active portion of the track (from the handle to the lower bound, or between two handles in range mode) is colored with the guide’s primary color. Handles are 24-pixel white circles with a primary-color border that scale up slightly on hover.

Above the track, the current value is displayed in large text (28 px). In range mode it shows both values separated by a dash. Numbers are formatted with locale-appropriate separators (e.g. “1,000” in English). Below the track, the min and max boundaries are shown in smaller, muted text.

Visitors can drag the handle or click anywhere on the track to jump to a value. The value display updates in real time as they drag, but the filter query is only sent when dragging ends — this keeps the experience smooth without excessive server requests.

Tips

  • Choose the right increment. For a $0–$1,000 slider, a step of 10 or 25 is easier to use than a step of 1. For ratings (1–5), use 0.5 or 1.
  • Always set a unit. A number without context (“150”) is meaningless. “$150” or “150 km” tells visitors exactly what they’re filtering.
  • Use range mode for budgets. Most shoppers have both a minimum and maximum in mind. A range slider (“$200–$800”) is more useful than a single-value slider (“Up to $800”).
  • Combine with a Cards step. Put a category Cards step before a price Slider step. The dynamic boundaries will narrow the slider range to only relevant values, giving visitors a tighter, more useful scale.

Next steps

  • Cards Step — Visual selection cards for categorical choices.
  • Lead Form Step — Capture visitor contact info with custom form fields.
  • How Filtering Works — Deep dive into filter sources, operators, and the facet index.