PriceRange

Sliders that allows users to select a maximum and minimum price.

The PriceRange component is a Slider that allows users to select a maximum and minimum price from a range.

Example

Code

$0$500

$100$250

Min

Max

Usage


_10import { PriceRange } from '@faststore/ui'

To apply styles, include the following in your stylesheet:


_10@import '@faststore/ui/src/components/organisms/PriceRange/styles.scss';

You can target and override PriceRange styles using the following data attributes:

data-fs-price-range

data-fs-price-range-inputs

Name	Type	Description	Default
variant	`"selling" \| "listing" \| "spot" \| "savings" \| "installment"`	The current use case variant for prices.
formatter*	`PriceFormatter`	Formatter function that transforms the raw price value and render the result.
aria-label	`string`	Defines a string value that labels the current element.
onChange	`(value: { min: number; max: number; }) => void`	Callback that fires when the slider value changes.
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-price-range`
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.	`1`
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.