Documentation
Feedback
Guides
Storefront Development

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.
Example
Code

Usage

Import the component


_10
import {
_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";


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%

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

NameTypeDescriptionDefault
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page