基础用法

示例

想要直接查看实现代码?请参考以下示例:

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

配置项

values

tsx
values: ReadonlyArray<number>
values: ReadonlyArray<number>

必填 范围选择器的当前值(或多个值)。

min

tsx
min: number
min: number

必填 范围的最小限制值。

max

tsx
max: number
max: number

必填 范围的最大限制值。

stepSize

ts
stepSize: number
stepSize: number

必填 可选步长之间的间隔距离。

onChange

ts
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

Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.