Price Range

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

Overview

Import the component from @faststore/ui

import { PriceRange } from '@faststore/ui'

Import Styles

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

$0$500

$100$250

Min

Max

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

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