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>

values: ReadonlyArray<number>

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

min

min: number

min: number

Required The minimum limit for the range.

max

max: number

max: number

Required The maximum limit for the range.

stepSize

stepSize: number

stepSize: number

Required The distance between selectable steps.

onChange

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

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

activeHandleIndex: null | number

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