# filter-price

> Price range facet with two number inputs, two range handles and a progress bar. The handles move by whole units: with a bound in cents (Shopify's {"price":{"min":0,"max":179.99}}) they run from 0 to 180, a handle at its end means the facet's own bound (the search keeps the 179.99 products when only the other handle moves) and the number inputs and labels show 179.99; a typed number never narrows the range (1.x: the max handle stopped at 179). The host's hide-empty and hide-if-single leave it shown: Shopify gives the price range as one value with count 0 (2.0; 1.x hid it with either).

Status: Ready (Smootify 2.0)  
Add-on: Search & discovery  
URL: https://www.smootify.io/docs/reference/elements/filter-price  
Updated: 2026-10-13

## At a glance

| Element | Built with | Label | The visitor picks |
|---|---|---|---|
| `filter-checkbox` | a Form Block with one Checkbox | `label="Color"` | several values |
| `filter-list` | a Form Block with one Radio button | `label="Size"` | one value |
| `filter-select` | a Form Block with a Select field | `label="Material"` | one value |
| `filter-dropdown` | a Form Block and a Webflow Dropdown | `label="Material"` | one value |
| `filter-popover` | a Form Block and a popover with links or buttons | `label="Material"` | one value |
| `filter-swatches` | a Form Block and one Custom element with the tag `button` | `label="Color"` | one value, or several with `multiple="true"` |
| `filter-price` | a Form Block with two number fields and two sliders | none: it reads no label | a price range |
| `filter-search` | a Form Block with a Text field | none: it reads no label | words to search |

More in [the guide](https://www.smootify.io/docs/build/filters).

## Where it can go

- **Inside** [`smootify-search-discovery`](https://www.smootify.io/docs/reference/elements/smootify-search-discovery).
- **Must contain** `form`, `form input[type="number"]`, `form input[type="range"]`, `[filter-price="progress"]`.
- **Out of place,** Smootify removes it from the page: exactly two number and two range inputs required.

## What it requires

- The **Search & discovery** extension (lite or server plan, or the extension activated in the Smootify dashboard). Without it, the element does nothing.

## Fields in the form

It reads no field of yours: reads no name: the inputs by type and order.

## Attributes on the element

- **It reads** `custom-label`, `selected-value`, `allow-reset`, `show-count`, `hide-parenthesis`.

## Attributes inside it

| Group | Attribute name | Values |
|---|---|---|
| [Price filter](https://www.smootify.io/docs/reference/attributes/filter-price) | `filter-price` | 3 |

## Loading

Its code loads only on pages that have `filter-price`.