Price Range

Price Range

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

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

Overview

Example

Code

$0$500

$100$250

Min

Max

Import the component from @faststore/ui


_10import { PriceRange } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


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

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

$0$500

$100$250

Min

Max


_10<PriceRange
_10  max={{ absolute: 500, selected: 250 }}
_10  min={{ absolute: 0, selected: 100 }}
_10  formatter={formatter}
_10  step={1}
_10/>

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.

data-fs-price-range

data-fs-price-range-inputs