tanstack-ranger
OfficialBuild accessible multi-thumb sliders fast
Authortanstack-skills
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Makes implementing accessible, precise, and multi-thumb sliders straightforward by handling complex thumb logic, value sorting, edge cases, and keyboard/ARIA accessibility so developers can focus on markup and styling.
Core Features & Use Cases
- Headless API for single-value, range, and multi-thumb sliders with sortedValues, handles, getSteps, getTicks, and programmatic setValues.
- Accessibility built-in including role and aria attributes, keyboard navigation, and focus management for inclusive UI components.
- Framework adapters for React, Vue, Solid, Svelte, Angular plus a framework-agnostic core for reuse across projects.
- Use Case: Build a multi-range price filter or audio scrubber with precise step, tick, and interpolation control while maintaining full accessibility.
Quick Start
Install @tanstack/react-ranger and instantiate useRanger with getRangerElement, values, min, max, and onChange to render a track with handles and segments.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: tanstack-ranger Download link: https://github.com/tanstack-skills/tanstack-skills/archive/main.zip#tanstack-ranger Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.