PriceRange

Use PriceRange to display a product’s price, whether a single amount for a simple product or a minimum-to-maximum range for a configurable product. The display prop controls how the range is presented.

Import

import { PriceRange } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
amount	number	No	The price of a simple product.
minimumAmount	number	No	The minimum price of a product price range.
maximumAmount	number	No	The maximum price of a product price range.
specialPrice	number	No	The special price of a product.
currency	string	No	The currency code used to format prices (for example, USD).
locale	string	No	The locale used to format prices (for example, en-US).
display	'dash' | 'from to' | 'as low as'	No	How to present the range. Defaults to dash.
variant	'default' | 'strikethrough'	No	The price display variant. Defaults to default.
size	'small' | 'medium' | 'large'	No	The price size. Defaults to small.
sale	boolean	No	Apply contrast styling to a special sale price. Defaults to false.

PriceRange also accepts standard HTML attributes (for example, className), except size.

Example

Render a from/to price range for a configurable product.

import { PriceRange, provider } from '/@dropins/tools/components.js';

await provider.render(PriceRange, {
  currency: 'USD',
  minimumAmount: 56.0,
  maximumAmount: 58.0,
  display: 'from to',
})(document.querySelector('.price-range'));

Related

• Price — display a single formatted price.
• Design tokens — the typography and color scales prices use.