Twilight docs

Price filter with ready-made price ranges as radio buttons plus "from" and "to" number inputs and a confirm arrow button.

Price filter with ready-made price ranges as radio buttons plus "from" and "to" number inputs and a confirm arrow button. Used inside salla-filters-widget for range filters; a theme rarely places it directly.

option.values ({ from, to, count }, where to can be "*" for no upper limit) become the radio buttons: they are shown as they are when there are 5 or fewer, grouped into 5 when there are more, and not shown at all when there is only one. Typed prices are applied when the user clicks the arrow button. Labels use salla.money, so amounts follow the store currency.

Use it

In HTML or JSX, use the tag <salla-price-range> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaPriceRange } from '@salla.sa/twilight-components-react/price-range';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

Try it

web-components/salla-price-range

Example

import { SallaPriceRange } from '@salla.sa/twilight-components-react/price-range';

export function Example() {
  return (
    <SallaPriceRange
      option={{ key: 'price', type: 'range', values: [{ from: 0, to: 100, count: 8 }, { from: 100, to: '*', count: 3 }] }}
      filtersData={{}}
      onChanged={e => console.log(e.detail.value)}
    />
  );
}

Properties

Property	Attribute	Description	Type
`filtersData`	`filters-data`	The selected filters of the listing. Only `filtersData.price` (`{ min, max }`) is read, once when the component connects, to restore the selected prices.	`any`
`maxPrice`	`max-price`	Selected maximum price, in the store currency. Filled from `filtersData.price.max` when the component connects, and updated as the user picks a range or types a value. An empty string means no upper limit.	`any`
`minPrice`	`min-price`	Selected minimum price, in the store currency. Filled from `filtersData.price.min` when the component connects, and updated as the user picks a range or types a value.	`any`
`option`	`option`	The price filter: `{ key, values }`, where each value is `{ from, to, count }` with prices in the store currency (`to` can be `"*"` for no upper limit). `key` is used to build the ids of the radio inputs.	`Filter`

Events

Listen with addEventListener, or the on prop of the React wrapper (for example onModalBack).

Event	Description	Detail
`changed`	Fires when the user picks a ready-made range or clicks the arrow button. `event.detail` is `{ event, option, value }`, where `value` is `{ min, max }` in the store currency. It does not fire before the component has finished its first render.	`any`