Property 'Values' in conflict about react-range

[tajo]

Something's broken about multiple thumbs and decimals.

[raptor3790]

Any news on this issue?

[swashata]

I can say that this is due to floating point arithmetic in JavaScript.

Let's say, my config is like this

{
	min: 97,
	max: 108,
	step: 0.1,
	values: [98.6],
}

During the calculation at

react-range/src/Range.tsx

Lines 91 to 97 in 57345c3

	values.forEach((value) => {
	if (!isStepDivisible(min, value, step)) {
	console.warn(
	'The `values` property is in conflict with the current `step`, `min`, and `max` properties. Please provide values that are accessible using the min, max, and step values.'
	);
	}
	});

It becomes

react-range/src/utils.ts

Lines 17 to 20 in 57345c3

	export function isStepDivisible(min: number, max: number, step: number): boolean {
	const res = (max - min) / step;
	return parseInt(res.toString(), 10) === res;
	}

const res = (max - min) / step;
// (98.6 - 97) / 0.1
// 15.999999999999943
return parseInt(res.toString(), 10) === res;
// 15 === 15.999999999999943
// false

One possible solution is to take a precision prop from userland and multiply the numbers to convert floats to integer.

Like

const multiplier = 10 ** precision;
const normalizedMax = Math.round(max * multiplier);
const normalizedMin = Math.round(min * multiplier);
const normalizedStep = Math.round(step * multiplier);
const res = (max - min) / step;
// (986 - 970) / 1
// 16
return parseInt(res.toString(), 10) === res;
// 16 === 16
// true

I have forked this library and made such changes. I cannot think of any other method where I can reliably extract number of decimal points from given values.