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

• basic

The API below described how to use the basic features.

values: ReadonlyArray<number>

values: ReadonlyArray<number>

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

min: number

min: number

Required The minimum limit for the range.

max: number

max: number

Required The maximum limit for the range.

stepSize: number

stepSize: number

Required The distance between selectable steps.

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

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

A function that is called when the handle is released.

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: 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.