Range slider

The APG multi-thumb slider, built from two native range inputs in a <fieldset>: one for the minimum, one for the maximum.

Consumer provides: the legend, the bounds, the step and the value format.

• Two labelled native sliders are fully keyboard and screen-reader accessible with no custom roles. Each has its own aria-valuetext in rupiah.
• The minimum can never pass the maximum: moving one pushes the other.
• Say the whole range in one sentence under them.
• For precise values, add two number fields that stay in sync.

Composition

Made of

Fieldset (molecule), Slider (atom)

React

import { RangeSlider } from '@imsus/normal-ui-react';

<RangeSlider legend="Price range" min={0} max={500000} step={10000}
  defaultValue={[100000, 300000]} format={(v) => 'Rp ' + v.toLocaleString('id-ID')} />