示例

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

以下 API 描述了如何使用对数插值器功能。

选项

默认情况下,react-ranger 在数据点之间使用线性插值,但允许您通过传递实现以下接口的对象来轻松自定义它以使用您自己的插值函数。

interpolator

tsx
interpolator: {
    getPercentageForValue: (val: number, min: number, max: number): number;
    getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number;
}
interpolator: {
    getPercentageForValue: (val: number, min: number, max: number): number;
    getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number;
}

要使用的插值器。默认为捆绑的线性刻度插值器。

  • getPercentageForValue - 获取值和范围,并返回一个百分比 [0, 100],表示值从左到右的位置。
  • getValueForClientX- 获取 clientX(距离范围选择器左边缘的偏移量)以及维度和范围设置,并将像素坐标转换回值。