From 366bedc6a74984675c567b227d02c59017d0d3bc Mon Sep 17 00:00:00 2001
From: nanda <nanda@cloudflare.com>
Date: Mon, 5 Oct 2026 09:30:23 -0700
Subject: [PATCH 1/2] fix(slider): fill the track at the range ends and center
 the grips

Base UI positions edge-aligned thumbs as a percentage of the control's
full width, but the control's padding made the track narrower than that,
and the indicator stopped at the thumb's center. Move the padding to a
wrapper, stretch the indicator over the whole thumb, and center each grip
in its thumb.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../kumo/src/components/slider/slider.tsx     | 81 ++++++++++---------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/packages/kumo/src/components/slider/slider.tsx b/packages/kumo/src/components/slider/slider.tsx
index 90417e958..92f7e4e29 100644
--- a/packages/kumo/src/components/slider/slider.tsx
+++ b/packages/kumo/src/components/slider/slider.tsx
@@ -125,50 +125,55 @@ export function Slider<Value extends SliderValue = SliderValue>({
           {label}
         </BaseSlider.Label>
       ) : null}
-      <BaseSlider.Control className={sliderVariants({ size })}>
-        <BaseSlider.Track className="relative h-full">
-          <BaseSlider.Indicator
-            className={cn(
-              "bg-kumo-base shadow-sm ring ring-kumo-line",
-              innerRadius,
-            )}
-          />
-          {Array.from({ length: thumbCount }, (_, index) => (
-            <BaseSlider.Thumb
-              key={index}
-              index={isRange ? index : undefined}
-              getAriaLabel={getAriaLabel}
+      {/* The padding lives on a wrapper rather than the control: Base UI
+          positions edge-aligned thumbs as a percentage of the control's full
+          width, so any control padding pushes them past the track ends. */}
+      <div className={sliderVariants({ size })}>
+        <BaseSlider.Control className="h-full">
+          <BaseSlider.Track className="relative h-full">
+            <BaseSlider.Indicator
               className={cn(
-                "h-full w-4 cursor-grab outline-none has-focus-visible:ring-2 has-focus-visible:ring-kumo-focus data-disabled:cursor-not-allowed data-dragging:cursor-grabbing",
+                // Base UI ends the indicator at the thumb's center. Padding
+                // stretches it over the whole thumb, so it fills the track at
+                // either end of the range. `box-content` is forced because global
+                // `* { box-sizing: border-box }` resets would otherwise win.
+                "box-content! bg-kumo-base pr-2 shadow-sm ring ring-kumo-line",
+                isRange && "-ml-2 pl-2",
                 innerRadius,
               )}
-            >
-              <span
-                aria-hidden
+            />
+            {Array.from({ length: thumbCount }, (_, index) => (
+              <BaseSlider.Thumb
+                key={index}
+                index={isRange ? index : undefined}
+                getAriaLabel={getAriaLabel}
                 className={cn(
-                  "absolute top-1/2 left-1/2 h-1/2 w-0.5 -translate-1/2 rounded-full bg-kumo-contrast/25",
-                  // Grips sit just inside the indicator: at its start for the
-                  // first thumb of a range, at its end otherwise.
-                  isRange && index === 0 ? "ml-[7px]" : "-ml-[7px]",
-                )}
-              />
-              <span
-                aria-hidden
-                className={cn(
-                  // The 8px gap plus the control's 3px padding, so the badge lines up
-                  // with the min and max labels below the control.
-                  "absolute top-full left-1/2 mt-[11px] -translate-x-1/2 rounded bg-kumo-brand px-1.5 font-medium whitespace-nowrap text-white tabular-nums",
-                  textSize,
+                  "h-full w-4 cursor-grab outline-none has-focus-visible:ring-2 has-focus-visible:ring-kumo-focus data-disabled:cursor-not-allowed data-dragging:cursor-grabbing",
+                  innerRadius,
                 )}
               >
-                <BaseSlider.Value>
-                  {(formattedValues) => formattedValues[index]}
-                </BaseSlider.Value>
-              </span>
-            </BaseSlider.Thumb>
-          ))}
-        </BaseSlider.Track>
-      </BaseSlider.Control>
+                <span
+                  aria-hidden
+                  className="absolute top-1/2 left-1/2 h-1/2 w-0.5 -translate-1/2 rounded-full bg-kumo-contrast/25"
+                />
+                <span
+                  aria-hidden
+                  className={cn(
+                    // The 8px gap plus the control's 3px padding, so the badge lines up
+                    // with the min and max labels below the control.
+                    "absolute top-full left-1/2 mt-[11px] -translate-x-1/2 rounded bg-kumo-brand px-1.5 font-medium whitespace-nowrap text-white tabular-nums",
+                    textSize,
+                  )}
+                >
+                  <BaseSlider.Value>
+                    {(formattedValues) => formattedValues[index]}
+                  </BaseSlider.Value>
+                </span>
+              </BaseSlider.Thumb>
+            ))}
+          </BaseSlider.Track>
+        </BaseSlider.Control>
+      </div>
       <div
         aria-hidden
         className={cn(

From 2e842f1c931d9a14237fb07795024580c980e55f Mon Sep 17 00:00:00 2001
From: nanda <nanda@cloudflare.com>
Date: Mon, 5 Oct 2026 11:22:44 -0700
Subject: [PATCH 2/2] style(docs): format slider demos

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/demos/HomeGrid.tsx              |  2 +-
 .../src/components/demos/SliderDemo.tsx            | 14 ++++++--------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
index 4b7c8bf68..2afe62243 100644
--- a/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/HomeGrid.tsx
@@ -566,7 +566,7 @@ export function HomeGrid() {
       Component: (
         <Slider
           defaultValue={[25, 75]}
-          getAriaLabel={index => (index === 0 ? "Minimum" : "Maximum")}
+          getAriaLabel={(index) => (index === 0 ? "Minimum" : "Maximum")}
           className="w-48"
         />
       ),
diff --git a/packages/kumo-docs-astro/src/components/demos/SliderDemo.tsx b/packages/kumo-docs-astro/src/components/demos/SliderDemo.tsx
index fa61afa24..fd7683acf 100644
--- a/packages/kumo-docs-astro/src/components/demos/SliderDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/SliderDemo.tsx
@@ -2,9 +2,7 @@ import { useState } from "react";
 import { Slider } from "@cloudflare/kumo";
 
 export function SliderBasicDemo() {
-  return (
-    <Slider label="Volume" defaultValue={40} className="w-72" />
-  );
+  return <Slider label="Volume" defaultValue={40} className="w-72" />;
 }
 
 export function SliderRangeDemo() {
@@ -12,7 +10,9 @@ export function SliderRangeDemo() {
     <Slider
       label="Price range"
       defaultValue={[25, 75]}
-      getAriaLabel={index => (index === 0 ? "Minimum price" : "Maximum price")}
+      getAriaLabel={(index) =>
+        index === 0 ? "Minimum price" : "Maximum price"
+      }
       className="w-72"
     />
   );
@@ -55,7 +55,7 @@ export function SliderControlledDemo() {
       <Slider
         label="Brightness"
         value={value}
-        onValueChange={next => setValue(next)}
+        onValueChange={(next) => setValue(next)}
       />
       <p className="text-sm text-kumo-subtle">Brightness: {value}%</p>
     </div>
@@ -63,7 +63,5 @@ export function SliderControlledDemo() {
 }
 
 export function SliderDisabledDemo() {
-  return (
-    <Slider label="Locked" defaultValue={70} disabled className="w-72" />
-  );
+  return <Slider label="Locked" defaultValue={70} disabled className="w-72" />;
 }