Documentation
Feedback
Guides
Storefront Development

Storefront Development
Slider

Sliders allow users to select a single value from a range.

Overview

Example
Code

Default Version

0500

Show Labels on Hover

0500
100250

Import

Import the component from @faststore/ui

_10
import { Slider } 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/atoms/Slider/styles.scss';

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

Usage

$0$500
$100$250

_14
<Slider
_14
max={{ absolute: 500, selected: 250 }}
_14
min={{ absolute: 0, selected: 100 }}
_14
absoluteValuesLabel={{
_14
min: useFormattedPrice(0),
_14
max: useFormattedPrice(500),
_14
}}
_14
maxValueLabelComponent={(maxValue) => {
_14
return <Price formatter={useFormattedPrice} value={maxValue} />
_14
}}
_14
minValueLabelComponent={(minValue) => {
_14
return <Price formatter={useFormattedPrice} value={minValue} />
_14
}}
_14
/>


Props

Range

NameTypeDescriptionDefault
absolutenumberThe absolute value of the slider.
selectednumberThe selected value of the slider.

RangeLabel

NameTypeDescriptionDefault
minstring | ReactNodeLabel for minimum range value.
maxstring | ReactNodeLabel for maximum range value.

Design Tokens

Local tokenDefault value/Global token linked
--fs-slider-heightvar(--fs-spacing-2)
--fs-slider-border-radiusvar(--fs-border-radius-pill)
--fs-slider-margin-bottomvar(--fs-spacing-3)
--fs-slider-slider-bkg-color
var(--fs-color-neutral-bkg)
--fs-slider-slider-selection-bkg-color
var(--fs-color-primary-bkg-light-active)
--fs-slider-transition-functionvar(--fs-transition-function)
--fs-slider-transition-propertyvar(--fs-transition-property)
--fs-slider-transition-timingvar(--fs-transition-timing)

Nested Elements

Thumb

Local tokenDefault value/Global token linked
--fs-slider-thumb-sizevar(--fs-spacing-4)
--fs-slider-thumb-bkg-color
var(--fs-color-primary-bkg)
--fs-slider-thumb-bkg-color-hover
var(--fs-color-primary-bkg-hover)
--fs-slider-thumb-border-widthvar(--fs-border-width)
--fs-slider-thumb-border-radiusvar(--fs-border-radius-circle)
--fs-slider-thumb-border-color
var(--fs-slider-thumb-bkg-color)
--fs-slider-thumb-border-color-hover
var(--fs-slider-thumb-bkg-color-hover)

Absolute Values

Local tokenDefault value/Global token linked
--fs-slider-absolute-values-text-color
var(--fs-color-disabled-text)

Value Label

Local tokenDefault value/Global token linked
--fs-slider-value-label-bottomvar(--fs-spacing-3)
--fs-slider-value-label-bkg-color
var(--fs-color-body-bkg)

Customization

For further customization, you can use the following data attributes:
data-fs-slider
data-fs-slider-absolute-values
data-fs-slider-range
data-fs-slider-thumb="left" | "right"
data-fs-slider-value-label="min" | "max"

  • $0$500
    $100$250

    PriceRange

    Price Ranges are sliders that allows users to select a maximum and minimum price.

    See more
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