DistributionSlider

A price distribution visualization with a dual-thumb range slider and currency inputs

Installation

pnpm add @wandercom/design-system-web

Usage

import { DistributionSlider } from '@wandercom/design-system-web';

export function Example() {
  const [range, setRange] = useState<[number, number]>([100, 800]);

  return (
    <DistributionSlider
      data={[
        { value: 100, count: 5 },
        { value: 200, count: 12 },
        { value: 300, count: 8 },
      ]}
      min={0}
      max={1000}
      value={range}
      onChange={setRange}
      currency="$"
    />
  );
}

Examples

Loading example...

The DistributionSlider renders a histogram of vertical bars colored by the selected range, a dual-thumb slider for selecting min/max bounds, and two CurrencyInput fields for precise numeric entry. Bars within the selected range are highlighted; bars outside are muted.

Controlled

Use value and onChange for controlled state.

const [range, setRange] = useState<[number, number]>([200, 800]);

<DistributionSlider
  data={priceDistribution}
  min={0}
  max={1000}
  value={range}
  onChange={setRange}
  currency="$"
/>

Uncontrolled

Use defaultValue for uncontrolled mode.

<DistributionSlider
  data={priceDistribution}
  min={0}
  max={1000}
  defaultValue={[100, 500]}
  currency="$"
/>

Custom labels

<DistributionSlider
  data={priceDistribution}
  min={0}
  max={1000}
  defaultValue={[100, 500]}
  minLabel="From"
  maxLabel="To"
  currency="EUR"
/>

Props

data?:

{ value: number; count: number }[]
Distribution data for the histogram. Each point has a value and count/frequency.

value?:

[number, number]
Controlled range as [min, max]. Use with onChange for controlled mode.

defaultValue?:

[number, number]
Default range for uncontrolled mode. Falls back to [min, max].

onChange?:

(value: [number, number]) => void
Callback fired when the range changes via slider or currency inputs.

min?:

number
Minimum possible value. Defaults to 0.

max?:

number
Maximum possible value. Defaults to 100.

step?:

number
Step increment for the slider. Defaults to 1.

minLabel?:

string
Label for the minimum input and slider thumb. Defaults to "Minimum".

maxLabel?:

string
Label for the maximum input and slider thumb. Defaults to "Max".

currency?:

string
Currency symbol for the CurrencyInput fields. Defaults to "$".

locale?:

string
Locale for currency input formatting. Defaults to "en-US".

disabled?:

boolean
Disables the slider and inputs when true. Defaults to false.

className?:

string
Additional CSS classes to apply to the root container.

Accessibility

The DistributionSlider is built on Base UI Slider and follows WAI-ARIA slider pattern with two thumbs.

Keyboard interaction:

  • Arrow Left / Arrow Down - Decrease the focused thumb value by one step
  • Arrow Right / Arrow Up - Increase the focused thumb value by one step
  • Home - Set the focused thumb to the minimum value
  • End - Set the focused thumb to the maximum value
  • Tab - Move focus between slider thumbs and currency inputs

Each slider thumb has an aria-label derived from minLabel and maxLabel so screen readers can distinguish the two controls.

Related Components

DistributionSlider