示例

想跳过实现吗?查看这些示例

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

选项

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

插值器

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(相对于 ranger 左边缘的偏移量)以及尺寸和范围设置,并将像素坐标转换回值。
订阅 Bytes

您的每周 JavaScript 新闻。每周一免费发送给超过 100,000 名开发者。

Bytes

无垃圾邮件。随时取消订阅。