Slider

FastStore UI components Atoms

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


_10import { 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

Name	Type	Description	Default
absolute	`number`	The absolute value of the slider.
selected	`number`	The selected value of the slider.

RangeLabel

Name	Type	Description	Default
min	`string \| ReactNode`	Label for minimum range value.
max	`string \| ReactNode`	Label for maximum range value.

Design Tokens

Local token	Default value/Global token linked
`--fs-slider-height`	`var(--fs-spacing-2)`
`--fs-slider-border-radius`	`var(--fs-border-radius-pill)`
`--fs-slider-margin-bottom`	`var(--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-function`	`var(--fs-transition-function)`
`--fs-slider-transition-property`	`var(--fs-transition-property)`
`--fs-slider-transition-timing`	`var(--fs-transition-timing)`

Nested Elements

Thumb

Local token	Default value/Global token linked
`--fs-slider-thumb-size`	`var(--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-width`	`var(--fs-border-width)`
`--fs-slider-thumb-border-radius`	`var(--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 token	Default value/Global token linked
`--fs-slider-absolute-values-text-color`	`var(--fs-color-disabled-text)`

Value Label

Local token	Default value/Global token linked
`--fs-slider-value-label-bottom`	`var(--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
Min
Max
PriceRange
Price Ranges are sliders that allows users to select a maximum and minimum price.
See more