@marimo-team/frontend 0.25.3-dev135 → 0.25.3-dev136

package/src/components/ui/__tests__/range-slider.test.tsx

@@ -0,0 +1,165 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { RangeSlider } from "../range-slider";
+
+vi.mock("react-aria", () => ({
+  useLocale: () => ({ locale: "en-US" }),
+}));
+
+vi.mock("../tooltip", () => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  );
+  const Content = ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  );
+
+  return {
+    TooltipContent: Content,
+    TooltipPortal: Wrapper,
+    TooltipProvider: Wrapper,
+    TooltipRoot: Wrapper,
+    TooltipTrigger: Wrapper,
+  };
+});
+
+vi.mock("radix-ui", () => {
+  const Primitive = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+  >(({ children, ...props }, ref) => (
+    <div ref={ref} {...props}>
+      {children}
+    </div>
+  ));
+  Primitive.displayName = "Primitive";
+
+  return {
+    Slider: {
+      Root: Primitive,
+      Track: Primitive,
+      Range: Primitive,
+      Thumb: Primitive,
+    },
+  };
+});
+
+describe("RangeSlider", () => {
+  it("formats both tooltip values without floating-point artifacts", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        step={0.01}
+        value={[1.2, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.2")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+    expect(queryByText("1.500000000000001")).toBeNull();
+  });
+
+  it("keeps the legacy precision when no step is supplied", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        value={[1.2, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.2")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+    expect(queryByText("1.500000000000001")).toBeNull();
+  });
+
+  it("retains value precision when no step is supplied", () => {
+    const { getByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        value={[1.2345, 1.500000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getByText("1.2345")).toBeDefined();
+    expect(getByText("1.5")).toBeDefined();
+  });
+
+  it("preserves precision from finer-grained steps", () => {
+    const { getAllByText, queryByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={10}
+        step={0.001}
+        value={[1.234, 1.235000000000001]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("1.234")).toHaveLength(1);
+    expect(getAllByText("1.235")).toHaveLength(1);
+    expect(queryByText("1.23")).toBeNull();
+  });
+
+  it("preserves precision for small tooltip values", () => {
+    const { getByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={0.01}
+        step={0.00001}
+        value={[0.00123, 0.0012400000000000002]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getByText("1.23e-3")).toBeDefined();
+    expect(getByText("1.24e-3")).toBeDefined();
+  });
+
+  it("infers precision from custom mapped steps", () => {
+    const steps = [1, 1.234, 2];
+    const { getAllByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0}
+        max={steps.length - 1}
+        step={1}
+        steps={steps}
+        value={[0, 1]}
+        valueMap={(value) => steps[value]}
+      />,
+    );
+
+    expect(getAllByText("1")).toHaveLength(1);
+    expect(getAllByText("1.234")).toHaveLength(1);
+  });
+
+  it("preserves decimals from the slider origin", () => {
+    const { getAllByText } = render(
+      <RangeSlider
+        aria-label="Range"
+        min={0.5}
+        max={10.5}
+        step={1}
+        value={[0.5, 1.5]}
+        valueMap={(value) => value}
+      />,
+    );
+
+    expect(getAllByText("0.5")).toHaveLength(1);
+    expect(getAllByText("1.5")).toHaveLength(1);
+  });
+});

package/src/components/ui/range-slider.tsx

@@ -4,7 +4,10 @@ import { Slider as SliderPrimitive } from "radix-ui";
 import * as React from "react";
 import { useLocale } from "react-aria";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import {
+  fractionDigitsForSlider,
+  prettyScientificNumber,
+} from "@/utils/numbers";
 import { useBoolean } from "../../hooks/useBoolean";
 import {
   TooltipContent,
@@ -20,9 +23,15 @@ const RangeSlider = React.forwardRef<
     valueMap: (sliderValue: number) => number;
     steps?: number[];
   }
->(({ className, valueMap, ...props }, ref) => {
+>(({ className, steps, valueMap, ...props }, ref) => {
   const [open, openActions] = useBoolean(false);
   const { locale } = useLocale();
+  const fractionDigits = fractionDigitsForSlider(
+    props.step,
+    steps,
+    props.min,
+    props.value?.map(valueMap),
+  );
 
   const isDraggingRange = React.useRef(false);
   const dragStartX = React.useRef(0);
@@ -94,11 +103,9 @@ const RangeSlider = React.forwardRef<
     const [origLeft, origRight] = dragStartValue.current;
     const rangeWidth = origRight - origLeft;
 
-    const steps = props.steps;
-    const step: number =
-      steps && steps.length > 1
-        ? Math.min(...steps.slice(1).map((s, i) => s - steps[i]))
-        : (props.step ?? 1);
+    // `steps` contains mapped display values, while pointer movement happens
+    // in the slider's index/value space. Use the Radix step for snapping.
+    const step = props.step ?? 1;
     const snappedDelta = Math.round(delta / step) * step;
 
     const clampedDelta = Math.max(
@@ -177,7 +184,10 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[0]}>
-                {prettyScientificNumber(valueMap(props.value[0]), { locale })}
+                {prettyScientificNumber(valueMap(props.value[0]), {
+                  maximumFractionDigits: fractionDigits,
+                  locale,
+                })}
               </TooltipContent>
             )}
           </TooltipPortal>
@@ -198,7 +208,10 @@ const RangeSlider = React.forwardRef<
           <TooltipPortal>
             {props.value != null && props.value.length === 2 && (
               <TooltipContent key={props.value[1]}>
-                {prettyScientificNumber(valueMap(props.value[1]), { locale })}
+                {prettyScientificNumber(valueMap(props.value[1]), {
+                  maximumFractionDigits: fractionDigits,
+                  locale,
+                })}
               </TooltipContent>
             )}
           </TooltipPortal>

package/src/plugins/impl/RangeSliderPlugin.tsx

@@ -5,7 +5,10 @@ import { type JSX, useEffect, useId, useState } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
 import { cn } from "@/utils/cn";
-import { prettyScientificNumber } from "@/utils/numbers";
+import {
+  fractionDigitsForSlider,
+  prettyScientificNumber,
+} from "@/utils/numbers";
 import { RangeSlider } from "../../components/ui/range-slider";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
@@ -74,6 +77,7 @@ const RangeSliderComponent = ({
   start,
   stop,
   step,
+  steps,
   debounce,
   orientation,
   showValue,
@@ -86,6 +90,12 @@ const RangeSliderComponent = ({
 
   // Hold internal value
   const [internalValue, setInternalValue] = useState(value);
+  const fractionDigits = fractionDigitsForSlider(
+    step,
+    steps,
+    start,
+    internalValue.map(valueMap),
+  );
 
   // Update internal value on prop change
   useEffect(() => {
@@ -121,6 +131,7 @@ const RangeSliderComponent = ({
           min={start}
           max={stop}
           step={step}
+          steps={steps ?? undefined}
           orientation={orientation}
           disabled={disabled}
           // Triggered on all value changes
@@ -154,8 +165,12 @@ const RangeSliderComponent = ({
         {showValue && (
           <div className="text-xs text-muted-foreground min-w-[16px]">
             {`${prettyScientificNumber(valueMap(internalValue[0]), {
+              maximumFractionDigits: fractionDigits,
+              locale,
+            })}, ${prettyScientificNumber(valueMap(internalValue[1]), {
+              maximumFractionDigits: fractionDigits,
               locale,
-            })}, ${prettyScientificNumber(valueMap(internalValue[1]), { locale })}`}
+            })}`}
           </div>
         )}
       </div>

package/src/plugins/impl/__tests__/RangeSliderPlugin.test.tsx

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import type { z } from "zod";
+import type { IPluginProps } from "../../types";
+import { RangeSliderPlugin } from "../RangeSliderPlugin";
+
+vi.mock("@/components/ui/range-slider", () => ({
+  RangeSlider: () => <div data-testid="range-slider" />,
+}));
+
+vi.mock("react-aria", () => ({
+  useLocale: () => ({ locale: "en-US" }),
+}));
+
+describe("RangeSliderPlugin", () => {
+  type PluginProps = IPluginProps<
+    number[],
+    z.infer<typeof RangeSliderPlugin.prototype.validator>
+  >;
+
+  const createProps = (
+    value: number[],
+    data: Partial<PluginProps["data"]> = {},
+  ): PluginProps => ({
+    host: document.createElement("div"),
+    value,
+    setValue: vi.fn(),
+    data: {
+      initialValue: value,
+      label: null,
+      start: 0,
+      stop: 10,
+      step: 0.01,
+      steps: null,
+      debounce: false,
+      orientation: "horizontal",
+      showValue: true,
+      fullWidth: true,
+      disabled: false,
+      ...data,
+    },
+    functions: {},
+  });
+
+  it("rounds floating-point artifacts in the displayed range", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.2, 1.500000000000001]);
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.2, 1.5")).toBeDefined();
+  });
+
+  it("preserves precision from finer-grained steps", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.234, 1.235000000000001], { step: 0.001 });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.234, 1.235")).toBeDefined();
+  });
+
+  it("retains value precision when no step is supplied", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([1.2345, 1.500000000000001], {
+      step: undefined,
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.2345, 1.5")).toBeDefined();
+  });
+
+  it("preserves precision for small displayed values", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0.00123, 0.0012400000000000002], {
+      stop: 0.01,
+      step: 0.00001,
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1.23e-3, 1.24e-3")).toBeDefined();
+  });
+
+  it("infers precision from custom steps", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0, 1], {
+      stop: 2,
+      step: undefined,
+      steps: [1, 1.234, 2],
+    });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("1, 1.234")).toBeDefined();
+  });
+
+  it("preserves decimals from the slider origin", () => {
+    const plugin = new RangeSliderPlugin();
+    const props = createProps([0.5, 1.5], { start: 0.5, stop: 10, step: 1 });
+
+    const { getByText } = render(plugin.render(props));
+
+    expect(getByText("0.5, 1.5")).toBeDefined();
+  });
+});

package/src/utils/__tests__/numbers.test.ts

@@ -2,6 +2,7 @@
 import { describe, expect, it, vi } from "vitest";
 import {
   countFractionDigits,
+  fractionDigitsForSlider,
   maxFractionDigitsForSteps,
   prettyEngineeringNumber,
   prettyNumber,
@@ -104,6 +105,42 @@ describe("prettyScientificNumber", () => {
       "1.23456789101112",
     );
   });
+
+  it("supports caller-provided display precision", () => {
+    expect(
+      prettyScientificNumber(1.2340000000000002, {
+        maximumFractionDigits: 2,
+        locale,
+      }),
+    ).toBe("1.23");
+    expect(
+      prettyScientificNumber(1.2340000000000002, {
+        maximumFractionDigits: 3,
+        locale,
+      }),
+    ).toBe("1.234");
+    expect(
+      prettyScientificNumber(1.234, {
+        maximumFractionDigits: 3,
+        locale,
+      }),
+    ).toBe("1.234");
+  });
+
+  it("preserves caller-provided precision in scientific notation", () => {
+    expect(
+      prettyScientificNumber(0.0012300000000000002, {
+        maximumFractionDigits: 5,
+        locale,
+      }),
+    ).toBe("1.23e-3");
+    expect(
+      prettyScientificNumber(1_000_001.2300000001, {
+        maximumFractionDigits: 2,
+        locale,
+      }),
+    ).toBe("1.00000123e6");
+  });
 });
 
 describe("prettyEngineeringNumber", () => {
@@ -153,3 +190,23 @@ describe("maxFractionDigitsForSteps", () => {
     expect(maxFractionDigitsForSteps([1, 2, 3, 4], 1)).toBe(0);
   });
 });
+
+describe("fractionDigitsForSlider", () => {
+  it("preserves precision for regular slider steps", () => {
+    expect(fractionDigitsForSlider(0.001)).toBe(3);
+    expect(fractionDigitsForSlider(0.01)).toBe(2);
+    expect(fractionDigitsForSlider(undefined)).toBe(2);
+    expect(fractionDigitsForSlider(undefined, null, 0, [0.1234, 0.5])).toBe(4);
+  });
+
+  it("infers precision from custom step values", () => {
+    expect(fractionDigitsForSlider(undefined, [1, 1.234, 2])).toBe(3);
+    expect(
+      fractionDigitsForSlider(undefined, [0.1, 0.2, 0.30000000000000004]),
+    ).toBe(1);
+  });
+
+  it("includes the slider origin in regular step precision", () => {
+    expect(fractionDigitsForSlider(1, null, 0.5)).toBe(1);
+  });
+});

package/src/utils/numbers.ts

@@ -24,19 +24,19 @@ export const maxFractionalDigits = memoizeLastValue((locale: string) => {
 });
 
 const getScientificFormatter = memoizeLastValue(
-  (locale: string) =>
+  (locale: string, maximumFractionDigits = 1) =>
     new Intl.NumberFormat(locale, {
       minimumFractionDigits: 1,
-      maximumFractionDigits: 1,
+      maximumFractionDigits,
       notation: "scientific",
     }),
 );
 
 const getRoundedFormatter = memoizeLastValue(
-  (locale: string) =>
+  (locale: string, maximumFractionDigits = 2) =>
     new Intl.NumberFormat(locale, {
       minimumFractionDigits: 0,
-      maximumFractionDigits: 2,
+      maximumFractionDigits,
     }),
 );
 
@@ -60,7 +60,7 @@ export function countFractionDigits(n: number): number {
 
 /** Max fraction digits to display a set of step values cleanly. */
 export function maxFractionDigitsForSteps(
-  steps: number[],
+  steps: readonly number[],
   minGap: number,
 ): number {
   let max = countFractionDigits(minGap);
@@ -70,6 +70,41 @@ export function maxFractionDigitsForSteps(
   return max;
 }
 
+/** Infer display precision from a slider's regular or custom steps. */
+export function fractionDigitsForSlider(
+  step?: number,
+  steps?: readonly number[] | null,
+  origin?: number,
+  values?: readonly number[],
+): number {
+  const originDigits = origin == null ? 0 : countFractionDigits(origin);
+
+  if (steps && steps.length > 0) {
+    let minGap = Number.POSITIVE_INFINITY;
+    for (let i = 1; i < steps.length; i++) {
+      const gap = Math.abs(steps[i] - steps[i - 1]);
+      if (gap > 0 && gap < minGap) {
+        minGap = gap;
+      }
+    }
+
+    return Math.max(
+      originDigits,
+      maxFractionDigitsForSteps(steps, Number.isFinite(minGap) ? minGap : 0),
+    );
+  }
+
+  if (step == null || !Number.isFinite(step) || step <= 0) {
+    return Math.max(
+      2,
+      originDigits,
+      ...(values ?? []).map(countFractionDigits),
+    );
+  }
+
+  return Math.max(originDigits, countFractionDigits(step));
+}
+
 /** Round away float noise so step-based inputs stay on a clean decimal grid. */
 export function roundToFractionDigits(n: number, digits: number): number {
   return Number(n.toFixed(digits));
@@ -121,6 +156,7 @@ export function prettyScientificNumber(
   value: number,
   opts: {
     shouldRound?: boolean; // Default to false
+    maximumFractionDigits?: number;
     locale: string;
   },
 ): string {
@@ -133,14 +169,28 @@ export function prettyScientificNumber(
   // Determine if the number should be in scientific notation
   const absValue = Math.abs(value);
   if (absValue < 1e-2 || absValue >= 1e6) {
-    return getScientificFormatter(opts.locale).format(value).toLowerCase();
+    // Scientific notation counts digits after the decimal in the mantissa.
+    const digits =
+      opts.maximumFractionDigits === undefined
+        ? 1
+        : Math.max(
+            1,
+            Math.min(
+              maxFractionalDigits(opts.locale),
+              opts.maximumFractionDigits + Math.floor(Math.log10(absValue)),
+            ),
+          );
+    return getScientificFormatter(opts.locale, digits)
+      .format(value)
+      .toLowerCase();
   }
 
   const { shouldRound, locale } = opts;
 
-  if (shouldRound) {
-    // Number has an integer part, format with 2 decimal places
-    return getRoundedFormatter(locale).format(value);
+  if (shouldRound || opts.maximumFractionDigits !== undefined) {
+    return getRoundedFormatter(locale, opts.maximumFractionDigits ?? 2).format(
+      value,
+    );
   }
 
   // Don't round

package/dist/assets/feedback-button-94vZrmBy.js

@@ -1 +0,0 @@
-import{n as e}from"./feedback-button-C2XmZw_y.js";export{e as FeedbackModal};