filters

Filters

Filter card with a price range slider, collapsible category, size and colour groups that count their selections, an in-stock switch, a live result count, and clear and show-results actions.

States: Default

Parts

Part	File	Does
Filters	Filters.vue	Shows filter groups with a price range and in-stock switch, and a result count.

Styling

Part	Recipe
Filters	filters-range-to

Install

Writes 3 files into components/sections/filters/. For agents, npx @frontic/ui docs filters prints this reference as markdown; the MCP server serves the same.

Installs with it: accordion; badge; button; card; filter; price; slider

Built from

Accordion Badge Button Card Filter Price Slider

API reference

Filters Filters.vue

Shows filter groups with a price range and in-stock switch, and a result count.

Prop	Type	Default
title	string	'Filters'

description	string	—

results*	number	—

priceMin*	number	—

priceMax*	number	—

priceStep	number	100

currency	string	'EUR'

precision	number	2

defaultOpen	string[]	['price']

priceLabel	string	'Price'

priceToLabel	string	'to'

inStockLabel	string	'In stock only'

clearLabel	string	'Clear all'

resultsLabel	((count: number) => string)	count === 1 ? '1 result' : `${count} results`

showResultsLabel	((count: number) => string)	count === 1 ? 'Show 1 result' : `Show ${count} results`

surface	'raised' \| 'bare'	'raised'

class	ClassValue	—

groups	FiltersGroup[]	[]

price	number[]	—

inStock	boolean	false

Event	Payload
clear	—

update:groups	value: FiltersGroup[]

update:price	value: number[] \| undefined

update:inStock	value: boolean

apply	—

Data attribute	Values
data-surface	'raised' \| 'bare'

Recipe filters-range-to	Sets
base: filters-range-to	2 properties · 1 inherited

Example