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

Min

Max

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

Props

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.

Customization

data-fs-price-range

data-fs-price-range-inputs

Payment Methods Product Grid