Range Filter
A low and a high, set over a histogram of what’s being filtered. The bars in the range turn to ink as the handles pass, and the count of what’s left rolls to each new number.
Usage
import { RangeFilter } from '@wdzyi/ui';
const aud = new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD', maximumFractionDigits: 0 });
<RangeFilter
data={stays.map((stay) => stay.nightlyRate)}
min={40}
max={500}
step={5}
value={rate}
onValueChange={setRate}
format={(value) => aud.format(value)}
label='Nightly rate'
noun='stay'
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- datanumber[] | RangeFilterBin[]
- The values to filter, which it counts into bars, or bins already counted, each with from, to and count.
- min, maxnumber = the ends of the data
- The ends of the track.
- stepnumber = 1
- How far a handle moves at a time, and what a typed value rounds to.
- value, defaultValue[number, number] = [min, max]
- The range as low and high, when you hold it, or where it starts when it holds its own.
- onValueChange(value: [number, number]) => void
- Called with the new range as it changes, while dragging too.
- format(value: number) => string
- How a value reads in the fields and to screen readers, such as $120. By default, the number, written to the step’s places.
- labelstring = 'Range'
- What it filters by, over the histogram. It names the handles for screen readers too.
- nounstring = 'result'
- What’s counted, in the singular, such as stay. An s is added for more than one.
- binsnumber = 28
- How many bars to count the values into. Bins given as data are drawn as they are.
- heightnumber = 56
- The histogram’s height, in px.
- classNamestring
- Added to it. It fills the width it’s given.
Notes
- The bars grow up from the track when it first appears, 14ms apart from the left, and a bar turns between ink and faint in 160ms as a handle passes its middle. The count is a Rolling Counter, rolling the short way to each new number as you drag.
- Press anywhere along it and the nearer handle glides there in 220ms. Press on a handle and it’s taken where it is, filling in and swelling a little on a spring while it’s held. Two handles in one place part the way the drag goes.
- Each handle is a slider to the keys and to screen readers: the arrows move it a step, Page Up and Down a tenth of the track, and Home and End as far as it can go. The fields under it take a typed value on Enter or when you leave them, kept in range and rounded to the step, and the arrows step them too.
- The bars are laid on whole pixels, so their edges stay sharp at any width. A handle’s middle is the colour behind it: set --range-filter-surface if that isn’t a card. With reduced motion, nothing grows, swells or glides.