skills.rest
SeanChenR
SeanChenRCOMMUNITY
Explore all skills by this author →
GitHub

tanstack-ranger

Provide headless utilities for accessible range sliders across React, Vue, Solid, Svelte, and Angular.

Updated Aug 23, 2026
Search Tags:#accessibility#react#slider#ticks#range-slider#multi-thumb#interpolator
One-click install
npx skills add https://github.com/SeanChenR/maestro-agent --skill tanstack-ranger-seanchenr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-ranger
Source: https://github.com/SeanChenR/maestro-agent/tree/main/.agents/skills/tanstack-ranger
Command: npx skills add https://github.com/SeanChenR/maestro-agent --skill tanstack-ranger-seanchenr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building accessible, performant, and flexible single-value and multi-thumb range sliders is complex because it requires coordinated state management, precise positioning, keyboard and touch interactions, and correct ARIA semantics across frameworks. TanStack Ranger centralizes this logic so developers can focus on markup and styling while the library handles value sorting, handle interactions, steps, ticks, and interpolation.

Core Features & Use Cases

  • Headless API: Provides a framework-agnostic core and framework adapters for React, Vue, Solid, Svelte, and Angular so you control rendering and styling.
  • Multi-thumb and single value support: Handles sorted values, overlapping thumbs, programmatic setValues, and segments between handles.
  • Advanced controls: Supports stepSize, custom steps, tick marks, interpolators (including logarithmic), onDrag events, and getSteps/getTicks helpers.
  • Accessibility: Built-in ARIA roles and attributes, keyboard navigation, and focus management for screen readers and keyboard users.
  • Use Cases: Range filters in search interfaces, audio/video scrubbers, multi-range pricing sliders, and complex form inputs.

Quick Start

Create a React range slider using tanstack-ranger with two handles at 25 and 75 that updates local state on change and exposes step and tick helpers.

Frequently Asked Questions about tanstack-ranger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an accessible multi-thumb range slider in React?▼

TanStack Ranger provides headless utilities to build accessible range sliders in React, handling value sorting, ARIA roles, and keyboard navigation while you control the markup and styling.

What is a headless range slider and how does it handle accessibility?▼

A headless range slider separates logic from rendering, providing built-in ARIA roles, attributes, and keyboard navigation so you can implement custom UI while ensuring screen reader and keyboard accessibility.

Can I use a multi-thumb range slider with Vue, Solid, Svelte, or Angular?▼

Yes, this headless range slider utility provides framework adapters for Vue, Solid, Svelte, and Angular, allowing you to implement multi-thumb sliders with consistent state management and accessibility across different web frameworks.

How do I add tick marks and logarithmic scaling to a range slider?▼

You can add tick marks and logarithmic scaling by configuring the slider's interpolators and using built-in getTicks and getSteps helpers, which support custom steps and non-linear value mapping for advanced controls.

How do I manage overlapping thumbs and sorted values in a multi-range slider?▼

A headless multi-range slider handles overlapping thumbs and sorted values automatically through coordinated state management, exposing programmatic APIs like setValues so you can update handle positions programmatically.

What's the best way to create a range filter for a search interface?▼

The best way to create a range filter for a search interface is using a headless range slider utility that supports multi-thumb values, step configurations, and keyboard navigation to ensure flexible and accessible user filtering.

Related Skills

Explore More Software Engineering Skills→
tanstack-skillstanstack-skills
29

tanstack-ranger

Provides headless utilities for building accessible range and multi slider UIs across major frameworks.

Official
Intermediate
TaherMustansir1929TaherMustansir1929

tanstack-ranger

Provides headless utilities for building accessible range and multi-slider interfaces.

Community
Intermediate
GedMarcGedMarc
2

angular-awesome-forms

Integrate Web Awesome controls with Angular Forms via ngModel or FormGroup.

Community
Intermediate
JeromyJSmithJeromyJSmith
3

tanstack-ranger

Generate accessible single-value and multi-thumb range sliders with headless utilities.

Community
Intermediate