示例
想直接看实现？可以参考以下示例
下面 API 描述了如何使用 基础 功能。
选项
值
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
手柄
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}>
要渲染的手柄。每个 手柄 具有以下属性
- value: number - 手柄的当前值。
- isActive: boolean - 表示手柄当前是否被拖动。
- onKeyDownHandler(event): func
- onMouseDownHandler(event): func
- onTouchStart(event): func
activeHandleIndex
tsx
activeHandleIndex: null | number
activeHandleIndex: null | number
当前正在拖动的手柄的零基索引，如果没有手柄被拖动，则为 null。
我们的合作伙伴
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。
订阅 Bytes
您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。