📄 tanstack/ranger/latest/docs/framework/react/api/logarithmic-interpolator

By default, react-ranger uses linear interpolation between data points, but allows you to easily customize it to use your own interpolation functions by passing an object that implements the following interface.

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

The Interpolator to use. Defaults to the bundled linear-scale interpolator

getPercentageForValue - Takes the value & range and returns a percentage [0, 100] where the value sits from left to right.
getValueForClientX- Takes the clientX (offset from the left edge of the ranger) along with the dimensions and range settings and transforms a pixel coordinate back into a value.

Edit on GitHub

Custom Styles

Update on Drag

Partners Become a Partner

scarf analytics