fix(slider): resolve step & snap floating point precision

packages/calcite-components/src/components/slider/slider.e2e.ts

@@ -204,6 +204,17 @@ describe("calcite-slider", () => {
     });
   });
 
+  it("step floating point precision", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      `<calcite-slider value="1.4" label-handles max="10" min="0.1" snap step="0.1"></calcite-slider>`,
+    );
+    const slider = await page.find("calcite-slider");
+
+    await page.waitForChanges();
+    expect((await slider.getProperty("value")).toString()).toBe("1.4");
+  });
+
   it("only selects values on step interval when snap prop is passed", async () => {
     const page = await newE2EPage();
     await page.setContent(`

packages/calcite-components/src/components/slider/slider.tsx

@@ -46,6 +46,7 @@ import {
 import { clamp, decimalPlaces } from "../../utils/math";
 import { ColorStop, DataSeries } from "../graph/interfaces";
 import { Scale } from "../interfaces";
+import { BigDecimal } from "../../utils/number";
 import { CSS, maxTickElementThreshold } from "./resources";
 import { ActiveSliderProperty, SetValueProperty, SideOffset, ThumbType } from "./interfaces";
 
@@ -964,8 +965,14 @@ export class Slider
    */
   private getClosestStep(value: number): number {
     const { max, min, step } = this;
-    let snappedValue = Math.floor((value - min) / step) * step + min;
-    snappedValue = Math.min(Math.max(snappedValue, min), max);
+
+    // prevents floating point precision issues
+    const bigDecimalString = new BigDecimal(`${Math.round((value - min) / step)}`)
+      .multiply(`${step}`)
+      .add(`${min}`)
+      .toString();
+
+    let snappedValue = Math.min(Math.max(Number(bigDecimalString), min), max);
 
     if (snappedValue > max) {
       snappedValue -= step;