# @tanstack/ranger

> Hooks for building range and multi-range sliders in React

Latest version **0.0.4** (published 2025-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tanstack/ranger
pnpm add @tanstack/ranger
yarn add @tanstack/ranger
bun add @tanstack/ranger
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2025-12-06 |
| First published | 2023-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 33.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 838 |
| Author | Tanner Linsley |
| Maintainers | tannerlinsley, lachlancollins, kylemathews |
| Keywords | ranger, slider |

## Links

- npm: https://www.npmjs.com/package/@tanstack/ranger
- Repository: https://github.com/TanStack/ranger
- Homepage: https://github.com/tanstack/ranger#readme
- Issues: https://github.com/TanStack/ranger/issues
- Funding: https://github.com/sponsors/tannerlinsley
- npm.io page: https://npm.io/package/@tanstack/ranger

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.0.4 (latest) — 2025-12-06
- 0.0.3 — 2023-11-23
- 0.0.1 — 2023-01-25

## README

![React Ranger Header](https://github.com/tanstack/ranger/raw/main/media/headerv1.png)

Headless UI for building ranger component in TS/JS and React

<a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
  <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack" />
</a><a href="https://github.com/TanStack/ranger/actions/workflows/ci.yml">
<img src="https://github.com/tanstack/ranger/actions/workflows/ci.yml/badge.svg" />
</a><a href="https://npmjs.com/package/@tanstack/ranger-core" target="\_parent">
  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/ranger-core.svg" />
</a><a href="https://bundlephobia.com/result?p=@tanstack/ranger@latest" target="\_parent">
  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/ranger@latest" />
</a><a href="#badge">
    <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
  </a><a href="https://github.com/tanstack/ranger/discussions">
  <img alt="Join the discussion on Github" src="https://img.shields.io/badge/Github%20Discussions%20%26%20Support-Chat%20now!-blue" />
</a><a href="https://github.com/tanstack/ranger" target="\_parent">
  <img alt="" src="https://img.shields.io/github/stars/tanstack/ranger.svg?style=social&label=Star" />
</a><a href="https://twitter.com/tannerlinsley" target="\_parent">
  <img alt="" src="https://img.shields.io/twitter/follow/tannerlinsley.svg?style=social&label=Follow" />
</a>

<br />
<br />

Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Query](https://github.com/TanStack/react-query), [TanStack Table](https://github.com/TanStack/table), [React Charts](https://github.com/TanStack/react-charts)

## Visit [tanstack.com/ranger](https://tanstack.com/ranger) for docs, guides, API and more!

## Quick Features

- Headless!
- Single or Multiple Handles
- Handle Devider Items
- Custom Steps or Step-Size
- Custom Ticks

<!-- Force  -->

---
_Source: https://npm.io/package/@tanstack/ranger · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._