TanStack Ranger React Docs

示例

想直接跳到实现部分？请查看以下示例：

basic

以下 API 描述了如何使用基础功能。

选项

values

tsx

values: ReadonlyArray<number>

values: ReadonlyArray<number>

必填范围选择器的当前值（或多个值）。

min

tsx

min: number

min: number

必填范围选择器的最小值限制。

max

tsx

max: number

max: number

必填范��选择器的最大值限制。

stepSize

stepSize: number

stepSize: number

必填可选步骤之间的距离。

onChange

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

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

当拖动句柄释放时调用的函数。

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

需要渲染的拖动句柄。每个 handle 具有以下属性：

value: number - 句柄的当前值。
isActive: boolean - 表示句柄当前是否正在被拖动。
onKeyDownHandler(event): func
onMouseDownHandler(event): func
onTouchStart(event): func

activeHandleIndex

tsx

activeHandleIndex: null | number

activeHandleIndex: null | number

当前正在拖动的句柄的从零开始的索引，如果没有句柄正在被拖动，则为 null。