FilterSlider

The mobile Filter view that is rendered inside a SlideOver component.

The mobile Filter view that is rendered inside a SlideOver component.The FilterSlider component is a compound of the following:

FilterSlider: SlideOver that wraps the Filter for small screen dimensions.
Filter: wraps an Accordion along with the component title.
FilterFacets: wraps an AccordionItem with its AccordionButton and an AccordionPanel for every Facet.
FilterFacetBoolean: wraps the list of the FilterFacetBooleanItem.
FilterFacetBooleanItem: wraps a Checkbox with its Label and the Badge that represents the child of the FilterFacetBoolean.
FilterFacetRange: wraps a PriceRange for a given Facet with the Range type.

Example

Code

Usage

Import the component


_10import {
_10  FilterSlider,
_10  Filter,
_10  FilterFacets,
_10  FilterFacetBoolean,
_10  FilterFacetBooleanItem,
_10  FilterFacetRange,
_10} from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/organisms/FilterSlider/styles.scss";

For details, see Importing FastStore UI component styles.

Design tokens

Content

Local token	Default value/Global token linked
`--fs-filter-slider-content-height`	`calc(100vh - var(--fs-filter-slider-footer-height))`
`--fs-filter-slider-content-padding`	`var(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3))`

Title

Local token	Default value/Global token linked
`--fs-filter-slider-title-font-size`	`var(--fs-text-size-4)`
`--fs-filter-slider-title-font-weight`	`var(--fs-text-weight-bold)`
`--fs-filter-slider-title-line-height`	`1.12`

Local token	Default value/Global token linked
`--fs-filter-slider-footer-width`	`100%`
`--fs-filter-slider-footer-height`	`5rem`

`--fs-filter-slider-footer-padding`	`var(--fs-spacing-3)`

`--fs-filter-slider-footer-bkg-color`	`var(--fs-color-neutral-0)`
`--fs-filter-slider-footer-box-shadow`	`0 0 6px rgb(0 0 0 / 20%)`

Local token	Default value/Global token linked
`--fs-filter-slider-footer-button-clear-width`	`40%`
`--fs-filter-slider-footer-button-clear-margin-right`	`var(--fs-spacing-3)`

`--fs-filter-slider-footer-button-apply-width`	`60%`

Data attributes

You can target and override FilterSlider styles using the following data attributes:

data-fs-filter-slider

data-fs-filter-slider-content

data-fs-filter-slider-title

data-fs-filter-slider-footer

data-fs-filter-slider-footer-button-apply

data-fs-filter-slider-footer-button-clear

Props

FilterSlider

Name	Type	Description	Default

Usage

Import the component

Import styles

Design tokens

Content

Title

Footer

Footer Buttons

Data attributes

Props

FilterSlider