Content temporarily unavailable

Examples#

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

• basic

The API below described how to use the basic features.

Options#

values#

values: ReadonlyArray<number>

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

min#

min: number

Required The minimum limit for the range.

max#

max: number

Required The maximum limit for the range.

stepSize#

stepSize: number

Required The distance between selectable steps.

onChange#

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

A function that is called when the handle is released.

API#

handles#

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#

activeHandleIndex: null | number

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