RangeSlider

Two thumbs picking a range, such as a price filter, based on react-aria-components. The current range is shown above the track and each thumb announces its own value, both formatted with formatOptions in locale.

import { RangeSlider } from "@evolve-storefront/ui/range-slider";

Design notes

Use defaultValue with onValueCommit to act only when the shopper lets go, and re-key the slider when the committed range changes from outside.

Preview

DefaultOpen in Storybook ↗

Usage

A price filter. The range shows above the track, and each thumb announces its own value; both are formatted in the page's locale.

// Fetch on release, not on every step of a drag.
<RangeSlider
  key={`${selectedMin}-${selectedMax}`}
  min={0}
  max={facet.max}
  defaultValue={[selectedMin, selectedMax]}
  minDistance={5}
  label={facet.label}
  thumbLabels={[t("min"), t("max")]}
  formatOptions={{ style: "currency", currency }}
  locale={locale}
  onValueCommit={([low, high]) => setFilter(low, high)}
/>;

Props

Prop	Type	Description
label	string	Accessible name of the slider, such as "Price".
thumbLabels	readonly [string, string]	Each thumb is announced as its label followed by label, such as "Minimum Price".
value?	RangeSliderValue	Controlled; update it from onValueChange, or the thumbs cannot move.
defaultValue?	RangeSliderValue
min?	number
max?	number
step?	number
minDistance?	number	The smallest gap the two ends keep, in value units.
onValueChange?	((value: [number, number]) => void)	Hands over both ends on every step of a drag.
onValueCommit?	((value: [number, number]) => void)	Hands over both ends once a drag or key press ends; fetch on this one.
formatOptions?	NumberFormatOptions	How a value is shown and announced, such as { style: "currency", currency: "EUR" }.
locale?	string	The page's locale, for formatOptions; ui has no locale of its own.
disabled?	boolean

Any other props go to the root element, like on a plain HTML element.

Examples

Keeps The Ends ApartminDistance holds the end that moved short of the other one.

<RangeSlider minDistance={10} {...props} />;

Open in Storybook ↗