🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

Price Range

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



Import the component from @faststore/ui

import { PriceRange } from '@faststore/ui'

Import Styles

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


  max={{ absolute: 500, selected: 250 }}
  min={{ absolute: 0, selected: 100 }}


variant"selling" | "listing" | "spot" | "savings" | "installment"The current use case variant for prices.
formatter*PriceFormatterFormatter function that transforms the raw price value and render the result.
aria-labelstringDefines a string value that labels the current element.
onChange(value: { min: number; max: number; }) => voidCallback that fires when the slider value changes.
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-price-range
min*RangeThe minimum value of the slider.
max*RangeThe maximum value of the slider.
stepnumberSpecifies the number interval to be used in the inputs.1
onEnd(value: { min: number; max: number; }) => voidCallback that fires when the slider value ends changing.
getAriaValueText(value: number, thumb?: "min" | "max") => stringA function used to set a human-readable value text based on the slider's current value.
minValueLabelComponent(minValue: number) => ReactNodeComponent that renders min value label above the left thumb.
maxValueLabelComponent(maxValue: number) => ReactNodeComponent that renders max value label above the right thumb.