Slider

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

The Slider component provides an interactive way for users to select a single value from a defined range. It is commonly used for adjusting settings such as price, volume, or other numeric values where precision within boundaries matters.

Example

Code

0500

Usage

Import the component


_10import { Slider } from '@faststore/ui'

Import Styles into your FastStore project

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Examples

Example

Code

$0$500

$100$250

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)`

Data attributes

You can target and override Slider styles using 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"

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.

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