From 789f4e0328042bdf17d6e6976dd6ddc10da44022 Mon Sep 17 00:00:00 2001
From: Mats Bosson <mats.bosson@gmail.com>
Date: Sun, 29 Mar 2026 08:35:52 +0700
Subject: [PATCH] Fix Slider NaN edge case

---
 .../core/src/components/slider/slider-range.tsx | 17 +++++++++++++----
 .../core/src/components/slider/slider-thumb.tsx |  2 +-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/slider/slider-range.tsx b/packages/core/src/components/slider/slider-range.tsx
index c618484..8ea719b 100644
--- a/packages/core/src/components/slider/slider-range.tsx
+++ b/packages/core/src/components/slider/slider-range.tsx
@@ -7,15 +7,24 @@ export type SliderRangeProps = JSX.HTMLAttributes<HTMLDivElement>;
 
 /** The filled portion of the slider track representing the current value. */
 export function SliderRange(props: SliderRangeProps): JSX.Element {
-  const [, rest] = splitProps(props, []);
+  const [local, rest] = splitProps(props, ["style"]);
   const ctx = useSliderContext();
 
-  const percentage = () => ((ctx.value() - ctx.min()) / (ctx.max() - ctx.min())) * 100;
+  const percentage = () => {
+    const range = ctx.max() - ctx.min();
+    if (range === 0) return 0;
+    return ((ctx.value() - ctx.min()) / range) * 100;
+  };
 
-  const style = () =>
+  const computedStyle = () =>
     ctx.orientation() === "horizontal"
       ? { width: `${percentage()}%` }
       : { height: `${percentage()}%` };
 
-  return <div style={style()} data-orientation={ctx.orientation()} {...rest} />;
+  const mergedStyle = () => ({
+    ...(typeof local.style === "object" ? local.style : {}),
+    ...computedStyle(),
+  });
+
+  return <div style={mergedStyle()} data-orientation={ctx.orientation()} {...rest} />;
 }
diff --git a/packages/core/src/components/slider/slider-thumb.tsx b/packages/core/src/components/slider/slider-thumb.tsx
index 18b1eef..66723c0 100644
--- a/packages/core/src/components/slider/slider-thumb.tsx
+++ b/packages/core/src/components/slider/slider-thumb.tsx
@@ -14,8 +14,8 @@ export function SliderThumb(props: SliderThumbProps): JSX.Element {
   const ctx = useSliderContext();
 
   const handleKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (e) => {
-    if (typeof local.onKeyDown === "function") local.onKeyDown(e);
     if (ctx.disabled()) return;
+    if (typeof local.onKeyDown === "function") local.onKeyDown(e);
 
     const current = ctx.value();
     const s = ctx.step();