Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

Import

Import the component from @faststore/ui

_10
import { PriceRange } from '@faststore/ui'

Import Styles

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


Usage

$0$500
$100$250

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


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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page