TanStack Ranger
Headless range controls
TanStackRanger
Build the slider your product actually needs.
Ranger provides headless primitives for range and multi-range sliders, leaving the track, thumbs, labels, ticks, and product UI completely under your control.
00.0 MillionTotal Downloads000,000,000Weekly Downloads0GitHub Stars
Headless track
bring your own UI and semantics
Multi-thumb
ranges, bounds, steps, constraints
React hooks
range math without a slider skin
Why Ranger
Range controls are small until the product gets specific.
Once a slider needs multiple thumbs, custom labels, controlled values, meaningful ticks, and a design system skin, a prebuilt UI becomes the wrong abstraction. Ranger keeps the hard math below your component.
The slider is yours.
Ranger gives interaction state and range math without rendering the track, thumbs, labels, or layout for you.
Multi-range without bespoke math.
Build price filters, timelines, editors, split ranges, or multi-thumb controls with bounds and steps handled predictably.
Ticks and labels can be product-specific.
Display percentages, dates, currency, logarithmic labels, marks, or custom annotations from the same headless primitives.
Small utility, high inversion of control.
Ranger is useful precisely because it does not become your design system. It stays under the component you actually need.
1
Values
Start with one value, two bounds, or a set of range handles.
2
Track
Map percentages and segments into your own track UI.
3
Thumbs
Render handles with labels, tooltips, constraints, and focus state.
4
Commit
Send final values into filters, charts, editors, or forms.
Slider lifecycle
Values in, product-specific control out.
Ranger helps translate values into interactive geometry. Your app decides what those values mean and how the user should see them.
Example
Take the range math for a spin.
The example stays simple on purpose: hooks provide the behavior, and the component owns the rendered slider.
Open source ecosystem
Ranger stays small so your component can be specific.
Maintainers, examples, partners, and GitHub sponsors keep the headless range primitive useful without turning it into a UI kit.
Maintainers
Partners
Ranger You?
We're looking for
TanStack Ranger
Partners to join our mission! Partner with us to push the boundaries of
TanStack Ranger
and build amazing things together.
Only one thing left to do...