All components (204)

Range filter

Choice · RangeFilter

What it is and when to use it

The price filter of a store: the bar with two handles to go by eye, the two numbers ("From" and "To") to get straight to the point and, if provided, a histogram with where the merchandise is and some common ranges ("Up to €100"). They are the same thing by two routes, because mouse and keyboard do not ask for the same thing.

When to use it

In the filter column of a catalog, next to FilterGroup. min and max are the limits; value and onChange carry the chosen range.
layout: how many items are in each range, from left to right (the histogram). suggestions: common ranges; the one that matches the chosen range is marked automatically.
format="number" for what is not money: a size, a weight in grams. By default it is money, in euros; another currency, with currency.
If they arrive crossed (200 in "From" with 100 in "To") they are swapped, instead of giving an empty range. Everything is snapped to the step and to the limits.

When not to

A single value, or a range without fields or histogram: Slider.
An exact number in a form: NumberField.

Keyboard: Tab goes through the two handles, the two fields and the common ranges. The handles move one step with the arrow keys. The fields confirm on leaving or with Enter, not on every key: typing "1" on the way to "120" does not leave the catalog at one euro. The ranges are a radio group: the arrow keys move through them and choose.

Accessibility: the handles are named "From" and "To" (or fromLabel and toLabel), like the fields. The header with the range written out ("€100 to €300") and the histogram are decoration for the screen reader: they repeat what the handles already say when moved. The common ranges are named "Price: common ranges".

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how amounts are written.

States and motion: when a common range is pressed or a number is typed, the handles and the fill slide into place; when dragging, they stay glued to the finger. The little bars grow from the bottom on appearing and change color on entering or leaving the chosen range. disabled (which leaves data-disabled on the root) turns off the bar, the fields and the ranges at once, and the little bars turn gray.

Sizes: size (sm, md by default, lg) goes to the bar, the two fields, the histogram and the header; the common ranges go one step below (sm, sm and md), since they are shortcuts and not the control. variant (outline, soft or ghost) goes to the two fields.

Fine-tuning: CSS variables on .amset-filter-range: --amset-filter-range-font (the header), --amset-filter-range-histogram (the height of the little bars), --amset-filter-range-slot-segments, --amset-filter-range-radius-segment, --amset-filter-range-segment and --amset-filter-range-segment-inside (the colors of the little bars, outside and inside the chosen range), --amset-filter-range-height-field and --amset-filter-range-dash (the dash between the fields is centered in its box and is as wide as its digits). The bar is a Slider, so --amset-slider-* also applies here, and the fields, --amset-field-*.

What it looks like

Price

From

Up to €100

100 – 300 €Over €300

<RangeFilter
  label="Price"
  min={0}
  max={600}
  step={10}
  format="currency"
  value={rango}
  onChange={setRango}
  layout={joyasPorTramo}
  suggestions={[
    { key: 'hasta-100', label: 'Up to 100 EUR', from: 0, to: 100 },
    { key: 'de-100-a-300', label: '100 - 300 EUR', from: 100, to: 300 },
  ]}
/>

Props

Import it with import { RangeFilter } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	—
`max`required	`number`	—
`min`required	`number`	—
`onChange`required	`(range: NumericRange) => void`	—
`value`required	`NumericRange`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`currency`	`string`	ISO code when the format is currency.
`disabled`	`boolean`	—
`format`	`"number" \| "currency"`	—
`fromLabel`	`string`	—
`layout`	`readonly number[]`	How many items there are in each bracket, from left to right.
`size`	`"sm" \| "md" \| "lg"`	—
`step`	`number`	—
`suggestions`	`readonly RangeSuggestion[]`	—
`toLabel`	`string`	—
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: