Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 88 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,99 @@
![React Ranger Header](https://github.com/tanstack/ranger/raw/main/media/headerv1.png)

Headless UI for building ranger component in TS/JS and React
<div align="center">
<img src="./media/header_ranger.png" alt="TanStack Ranger" />
</div>

<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" target="\_parent">
<img alt="" src="https://img.shields.io/npm/dm/@tanstack/ranger.svg" />
</a><a href="https://bundlephobia.com/result?p=@tanstack/ranger@latest" target="\_parent">
<br />

<div align="center">
<a href="https://npmjs.com/package/@tanstack/ranger" target="\_parent">
<img alt="" src="https://img.shields.io/npm/dm/@tanstack/ranger.svg" alt="npm downloads"/>
</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" alt="GitHub Stars"/>
</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>
</div>

<br />
<br />
<div align="center">
<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="#badge">
<img src="https://img.shields.io/github/v/release/tanstack/ranger" alt="Release"/>
</a>
<a href="https://twitter.com/tan_stack"><img src="https://img.shields.io/twitter/follow/tan_stack.svg?style=social" alt="Follow @TanStack"/></a>
</div>

<div align="center">

### [Become a Sponsor!](https://github.com/sponsors/tannerlinsley/)

</div>

# TanStack Ranger


A lightweight, framework‑agnostic utility for building fully type‑safe range and multi‑range sliders with complete control over design and behavior.

- 100% type‑safe hooks for React and more
- No pre‑styled components — bring your own UI
- Extensible primitives with maximum inversion of control
- Lightweight, simple, and easily integrated in any app


### <a href="https://tanstack.com/ranger">Read the docs →</b></a>

## Partners

<table align="center">
<tr>
<td>
<a href="https://www.coderabbit.ai/?via=tanstack&dub_id=aCcEEdAOqqutX6OS" >
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/coderabbit-dark-CMcuvjEy.svg" height="40" />
<source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" />
<img src="https://tanstack.com/assets/coderabbit-light-DVMJ2jHi.svg" height="40" alt="CodeRabbit" />
</picture>
</a>
</td>
<td>
<a href="https://www.cloudflare.com?utm_source=tanstack">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://tanstack.com/assets/cloudflare-white-DQDB7UaL.svg" height="60" />
<source media="(prefers-color-scheme: light)" srcset="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" />
<img src="https://tanstack.com/assets/cloudflare-black-CPufaW0B.svg" height="60" alt="Cloudflare" />
</picture>
</a>
</td>
</tr>
</table>

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)
<div align="center">
<img src="./media/partner_logo.svg" alt="Ranger & you?" height="65">
<p>
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.
</p>
<a href="mailto:partners@tanstack.com?subject=TanStack Ranger Partnership"><b>LET'S CHAT</b></a>
</div>

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

## Quick Features
- <a href="https://github.com/tanstack/config"><b>TanStack Config</b></a> – Tooling for JS/TS packages
- <a href="https://github.com/tanstack/db"><b>TanStack DB</b></a> – Reactive sync client store
- <a href="https://github.com/tanstack/devtools"><b>TanStack DevTools</b></a> – Unified devtools panel
- <a href="https://github.com/tanstack/form"><b>TanStack Form</b></a> – Type‑safe form state
- <a href="https://github.com/tanstack/pacer">TanStack Pacer</a> – Debouncing, throttling, batching
- <a href="https://github.com/tanstack/query"><b>TanStack Query</b></a> – Async state & caching
- <a href="https://github.com/tanstack/ranger"><b>TanStack Ranger</b></a> – Range & slider primitives
- <a href="https://github.com/tanstack/router"><b>TanStack Router</b></a> – Type‑safe routing, caching & URL state
- <a href="https://github.com/tanstack/router"><b>TanStack Start</b></a> – Full‑stack SSR & streaming
- <a href="https://github.com/tanstack/store"><b>TanStack Store</b></a> – Reactive data store
- <a href="https://github.com/tanstack/table"><b>TanStack Table</b></a> – Headless datagrids
- <a href="https://github.com/tanstack/virtual"><b>TanStack Virtual</b></a> – Virtualized rendering

- Headless!
- Single or Multiple Handles
- Handle Divider Items
- Custom Steps or Step-Size
- Custom Ticks
… and more at <a href="https://tanstack.com"><b>TanStack.com »</b></a>

<!-- Force -->
Binary file added media/header_ranger.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 26 additions & 0 deletions media/partner_logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.