UI Components
Organisms
Price Range

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

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

Usage

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

Props

NameTypeDescriptionDefault
Coming Soon

Customization

data-fs-price-range

data-fs-price-range-inputs