Source: https://tanstack.com/ranger/latest/docs/framework/react/api/basic

TanStack

Ranger v0v0

Search...

+ K

Auto

Log In

TanStack StartRC

Docs Examples GitHub Contributors

TanStack Router

Docs Examples GitHub Contributors

TanStack Query

Docs Examples GitHub Contributors

TanStack Table

Docs Examples Github Contributors

TanStack Formnew

Docs Examples Github Contributors

TanStack DBbeta

Docs Github Contributors

TanStack Virtual

Docs Examples Github Contributors

TanStack Paceralpha

Docs Examples Github Contributors

TanStack Storealpha

Docs Examples Github Contributors

TanStack Devtoolsalpha

Docs Github Contributors

More Libraries

Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide

Documentation

Framework

React

Version

Latest

Search...

+ K

Menu

• Home

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Installation
  
  core

• Quick Start
  
  core

Adapters

• React Ranger
  
  react

API Reference

• Basic
  
  react

• Custom Steps
  
  react

• Custom Styles
  
  react

• Logarithmic Interpolator
  
  react

• Update on Drag
  
  react

Examples

• Basic
  
  react

• Custom Steps
  
  react

• Custom Styles
  
  react

• Logarithmic Interpolator
  
  react

• Update on Drag
  
  react

Framework

React

Version

Latest

Menu

• Home

• Contributors

• GitHub

• Discord

Getting Started

• Overview
  
  core

• Installation
  
  core

• Quick Start
  
  core

Adapters

• React Ranger
  
  react

API Reference

• Basic
  
  react

• Custom Steps
  
  react

• Custom Styles
  
  react

• Logarithmic Interpolator
  
  react

• Update on Drag
  
  react

Examples

• Basic
  
  react

• Custom Steps
  
  react

• Custom Styles
  
  react

• Logarithmic Interpolator
  
  react

• Update on Drag
  
  react

On this page

• Examples

• Options

• values

• min

• max

• stepSize

• onChange

• API

• handles

• activeHandleIndex

Examples
--------

Want to skip to the implementation? Check out these examples:

• basic

The API below described how to use the basic features.

Options
------- ### values

tsx

values: ReadonlyArray<number>


values: ReadonlyArray<number>

Required The current value (or values) for the range.

### min

tsx

min: number


min: number

Required The minimum limit for the range.

### max

tsx

max: number


max: number

Required The maximum limit for the range.

### stepSize

ts

stepSize: number


stepSize: number

Required The distance between selectable steps.

### onChange

ts

onChange: (instance: Ranger<TTrackElement>) => void


onChange: (instance: Ranger<TTrackElement>) => void

A function that is called when the handle is released.

API
--- ### handles

tsx

handles: ReadonlyArray<{value: number; isActive: boolean; onKeyDownHandler(event): function; onMouseDownHandler(event): function; onTouchStart(event): function}>


handles: ReadonlyArray<{value: number; isActive: boolean; onKeyDownHandler(event): function; onMouseDownHandler(event): function; onTouchStart(event): function}>

Handles to be rendered. Each handle has the following props:

• value: number - The current value for the handle.
• isActive: boolean - Denotes if the handle is currently being dragged.
• onKeyDownHandler(event): func
• onMouseDownHandler(event): func
• onTouchStart(event): func

### activeHandleIndex

tsx

activeHandleIndex: null | number


activeHandleIndex: null | number

The zero-based index of the handle that is currently being dragged, or null if no handle is being dragged.

Edit on GitHub

React Ranger

Custom Steps

Partners Become a Partner