TanStack
Ranger v0v0
Docs
CodeRabbit
Cloudflare
Railway
Clerk
OpenRouter
SerpAPI
Netlify
AG Grid
WorkOS
Unkey
Sentry
Electric
Prisma
CodeRabbit
Cloudflare
Railway
Clerk
OpenRouter
SerpAPI
Netlify
AG Grid
WorkOS
Unkey
Sentry
Electric
Prisma
Menu
Getting Started
Adapters
API Reference
Examples

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.

Total DownloadsWeekly DownloadsGitHub Stars
Read the docs

Headless track

bring your own UI and semantics

Multi-thumb

ranges, bounds, steps, constraints

React hooks

range math without a slider skin

multi-range slider
$120
$310
$640
02505007501000

useRanger({ getRangerElement: () => rangerRef.current,
  min: 0, max: 1000,
  stepSize: 10, values: [120, 310, 640],
  onChange: instance => setValues(instance.sortedValues) })

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.

GitHub Sponsors

Become a Sponsor
Wow, you've come a long way!
Only one thing left to do...
© 2026 TanStack LLC