Documentation
Feedback
Guides
Storefront Development

Storefront Development
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.

Import

Import the component from @faststore/ui

_10
import {
_10
FilterSlider,
_10
Filter,
_10
FilterFacets,
_10
FilterFacetBoolean,
_10
FilterFacetBooleanItem,
_10
FilterFacetRange,
_10
} from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Example
Code

Props

Filter Slider

NameTypeDescriptionDefault

Design Tokens

Nested Elements

Content

Local tokenDefault value/Global token linked
--fs-filter-slider-content-heightcalc(100vh - var(--fs-filter-slider-footer-height))
--fs-filter-slider-content-paddingvar(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3))

Title

Local tokenDefault value/Global token linked
--fs-filter-slider-title-font-sizevar(--fs-text-size-4)
--fs-filter-slider-title-font-weightvar(--fs-text-weight-bold)
--fs-filter-slider-title-line-height1.12

Footer

Local tokenDefault value/Global token linked
--fs-filter-slider-footer-width100%
--fs-filter-slider-footer-height5rem
--fs-filter-slider-footer-paddingvar(--fs-spacing-3)
--fs-filter-slider-footer-bkg-color
var(--fs-color-neutral-0)
--fs-filter-slider-footer-box-shadow0 0 6px rgb(0 0 0 / 20%)

Footer Buttons

Local tokenDefault value/Global token linked
--fs-filter-slider-footer-button-clear-width40%
--fs-filter-slider-footer-button-clear-margin-rightvar(--fs-spacing-3)
--fs-filter-slider-footer-button-apply-width60%

Customization

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page