Skip to content

TanStack/ranger

beta
Switch branches/tags
Code

Latest commit

* Split into class

* Setup basic example

* Run rerenders

* Improve typing

* Remove event.persists

* Fix onDrag undefined case

* Emit instance instead of ranger values

* Migrate basic example to TS

* Use yarn

* Move ranger basic ranger example to react subfolder

* Use build config from react virtual

* Fix build

* Improve types

* Remove cast
8b1c39c

Git stats

Files

Permalink
Failed to load latest commit information.

React Ranger Header

Hooks for building range and multi-range sliders in React

#TanStack semantic-release Join the discussion on Github

Enjoy this library? Try them all! React Table, React Query, React Form, React Charts

Visit /docs for docs, guides, API and more!

Quick Features

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

Installation

$ npm i --save react-ranger
# or
$ yarn add react-ranger

How to help?

  • Try out the already-migrated examples
  • Try it out in your own projects.
  • Introspect the types! Even without the docs finished, the library ships with 100% typescript to help you explore its capabilities.
  • Read the contribution guidelines
  • Write some docs! Start with the API docs and try adding some information about one or more of the features. The types do a decent job of showing what's supported and the capabilities of the library.
  • Try your hand at migrating an example to v8! The todo list for the examples is above!
  • Using a plugin? Try rewriting your plugin (v8 doesn't have a plugin system any more) as a wrapping hook/function that uses useTable internally. The new API is much more powerful and easier to compose. If you find something you can't figure out, let us know and we'll add it to the API.

Become a Sponsor