# salla-price-range (https://docs.salla.dev/twilight/react/web-components/salla-price-range)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
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 [#try-it]

<Demo name="web-components/salla-price-range" />

## Example [#example]

```tsx
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)}
    />
  );
}
```

```ts
// `option` must be set before the element is added to the page
const range = document.createElement('salla-price-range');
range.option = { key: 'price', type: 'range', values: [{ from: 0, to: 100, count: 8 }, { from: 100, to: '*', count: 3 }] };
range.filtersData = {};
range.addEventListener('changed', e => console.log(e.detail.value)); // { min, max }
document.body.appendChild(range);
```

## Properties [#properties]

| Property      | Attribute      | Description                                                                                                                                                                                                   | Type     | Default |
| ------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `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 [#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`  |

## Methods [#methods]

Call these on the element or a React ref.

### `reset() => Promise<void>` [#reset--promisevoid]

Clears the minimum and maximum inputs and the stored prices. It does not emit `changed`. Resolves with no value.

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).

Used inside: [`<salla-filters-widget>`](https://docs.salla.dev/twilight/react/web-components/salla-filters-widget).