Range slider
Usage
A dual-thumb range over two overlapping native `<input type="range">` elements — each keeps its own keyboard and screen-reader semantics for free, which a from-scratch pointer-drag implementation would have to rebuild by hand for the same result.import { RangeSlider } from '@summonware/ui';Best practices
DoSet `formatValue` whenever the raw number is not self-explanatory — currency, percentages, units.
Don'tUse this for a single value. A dual-thumb range communicates "pick a span" — for one number, a single slider or a `TextInput` with type="number" is the honest control.
Examples
Common configurations, variations and states.Price range filter
Price range$200 – $800
Drag either handle — each clamps against the other.
Score range filter
Acceptable score range60 – 95
The same dual-thumb control over a 0–100 score instead of a currency amount — e.g. filtering to only the results above an acceptable quality threshold.
Reference variants
1 of 17 labels from the reference are demonstrated above.Range slider with two handles for selecting a price interval.Basic slider with tooltip and formatted value display.Sliders can be enabled and disabled.Using events to work with the values and style via CSS.Vertical slider with custom range.Tooltips can always be displayed on the slider handles.Using a custom step interval of 10.Slider with live value update on slide event.Slider with pip marks and labels. Click pips to set value.Non-linear range slider with percentage-based sub-ranges.Range slider with colored connect bar between handles.Soft limits that snap back when exceeded (20-80 range).Basic SliderNavigation ArrowsVertical SliderAutoplay with FadeMultiple Slides Per View