🎉 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.

Overview


Import

Import the component from @faststore/ui

import { PriceRange } from '@faststore/ui'

Import Styles into your FastStore project

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

@import '@faststore/ui/src/components/organisms/PriceRange/styles.scss';
@import '@faststore/ui/src/components/atoms/Slider/styles.scsss';
@import '@faststore/ui/src/components/atoms/Price/styles.scsss';

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


Usage

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

Props

NameTypeDescriptionDefault
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.

Customization

data-fs-price-range

data-fs-price-range-inputs