Slider

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

Overview

Import

Import the component from @faststore/ui

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:

@import '@faststore/ui/src/components/atoms/Slider/styles.scsss';

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

Usage

$0$500

$100$250

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

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-slider`
min*	`Range`	The minimum value of the slider.
max*	`Range`	The maximum value of the slider.
step	`number`	Specifies the number interval to be used in the inputs.
absoluteValuesLabel*	`RangeLabel`	Specifies the absolute values labels.
onChange	`(value: { min: number; max: number; }) => void`	Callback that fires when the slider value changes.
onEnd	`(value: { min: number; max: number; }) => void`	Callback that fires when the slider value ends changing.
getAriaValueText	`(value: number, thumb?: "min" \| "max") => string`	A function used to set a human-readable value text based on the slider's current value.
minValueLabelComponent	`(minValue: number) => ReactNode`	Component that renders min value label above the left thumb.
maxValueLabelComponent	`(maxValue: number) => ReactNode`	Component that renders max value label above the right thumb.

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"

Related components

$0$500
$100$250
Min
Max
PriceRange
Price Ranges are sliders that allows users to select a maximum and minimum price.
See more

Skeleton Sr Only