fix(range): round value to same number of decimal places as props to avoid floating point rounding errors

core/src/components/range/range.tsx

@@ -4,6 +4,7 @@ import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Gesture, GestureDetail, StyleEventDetail } from '../../interface';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '../../utils/content';
+import { roundToMaxDecimalPlaces } from '../../utils/floating-point';
 import type { LegacyFormController } from '../../utils/forms';
 import { createLegacyFormController } from '../../utils/forms';
 import type { Attributes } from '../../utils/helpers';
@@ -902,10 +903,14 @@ const renderKnob = (
 
 const ratioToValue = (ratio: number, min: number, max: number, step: number): number => {
   let value = (max - min) * ratio;
+
   if (step > 0) {
+    // round to nearest multiple of step, then add min
     value = Math.round(value / step) * step + min;
   }
-  return clamp(min, value, max);
+  const clampedValue = clamp(min, value, max);
+
+  return roundToMaxDecimalPlaces(clampedValue, min, max, step);
 };
 
 const valueToRatio = (value: number, min: number, max: number): number => {

core/src/utils/floating-point/floating-point.spec.ts

@@ -0,0 +1,22 @@
+import { getDecimalPlaces, roundToMaxDecimalPlaces } from './index';
+
+describe('floating point utils', () => {
+  describe('getDecimalPlaces', () => {
+    it('should calculate decimal places for a float', async () => {
+      const n = getDecimalPlaces(5.001);
+      expect(n).toBe(3);
+    });
+
+    it('should return no decimal places for a whole number', async () => {
+      const n = getDecimalPlaces(5);
+      expect(n).toBe(0);
+    });
+  });
+
+  describe('roundToMaxDecimalPlaces', () => {
+    it('should round to the highest number of places as references', async () => {
+      const n = roundToMaxDecimalPlaces(5.12345, 1.12, 2.123);
+      expect(n).toBe(5.123);
+    });
+  });
+});

core/src/utils/floating-point/index.ts

@@ -0,0 +1,32 @@
+export function getDecimalPlaces(n: number) {
+  if (n % 1 === 0) return 0;
+  return n.toString().split('.')[1].length;
+}
+
+/**
+ * Fixes floating point rounding errors in a result by rounding
+ * to the same specificity, or number of decimal places (*not*
+ * significant figures) as provided reference numbers. If multiple
+ * references are provided, the highest number of decimal places
+ * between them will be used.
+ *
+ * The main use case is when numbers x and y are added to produce n,
+ * but x and y are floats, so n may have rounding errors (such as
+ * 3.1000000004 instead of 3.1). As long as only addition/subtraction
+ * occurs between x and y, the specificity of the result will never
+ * increase, so x and y should be passed in as the references.
+ *
+ * If multiplication, division, or other operations were used to
+ * calculate n, the rounded result may have less specificity than
+ * desired. For example, 1 / 3 = 0.33333(...), but
+ * roundToMaxDecimalPlaces((1 / 3), 1, 3) will return 0, since both
+ * 1 and 3 are whole numbers.
+ *
+ * @param n The number to round.
+ * @param references Number(s) used to calculate n, or that should otherwise
+ * be used as a reference for the desired specificity.
+ */
+export function roundToMaxDecimalPlaces(n: number, ...references: number[]) {
+  const maxPlaces = Math.max(...references.map((r) => getDecimalPlaces(r)));
+  return Number(n.toFixed(maxPlaces));
+}