Ranger
Keep the range math. Invent the control.
Ranger owns the difficult range math—handles, steps, ticks, segments, dragging, and interpolation—while your product owns the control.
Two handles define an included interval.
2 handlesCustom interpolation
Not every useful scale is linear.
Prices, audio gain, risk scores, and timelines do not all move through value space the same way. Supply the interpolation instead of forcing the product into a linear track.
position → value
35.2
output at 62%
Multi-value geometry
Values become handles. Gaps become segments.
A set of values produces handles. The spaces around them produce meaningful regions: selected, excluded, buffered, safe, risky, or already played.
values
[22, 58, 81]
handles
3 positions
segments
4 regions
Headless boundary
The engine ends where the product begins.
Ranger provides positions, ticks, segments, and event handlers. Your interface decides whether those numbers become a price filter, a timeline, a color ramp, or something nobody has shipped yet.
Ranger returns
- handle positions
- track segments
- ticks and steps
- drag + keyboard handlers
You render
- semantic controls
- product labels
- brand and motion
- domain-specific feedback