From 5d4094c785650a15b88fc7c5641d6075ce20ecb1 Mon Sep 17 00:00:00 2001
From: AmbrishRamachandiran <ambrish.r@infosys.com>
Date: Tue, 10 Mar 2026 11:43:42 +0530
Subject: [PATCH] Fix review comments added single slider

Signed-off-by: AmbrishRamachandiran <ambrish.r@infosys.com>
---
 .../src/components/Slider/Slider.module.css   |  8 +-
 .../src/components/Slider/Slider.stories.tsx  |  5 +-
 packages/ui/src/components/Slider/Slider.tsx  | 94 ++++++++-----------
 3 files changed, 45 insertions(+), 62 deletions(-)

diff --git a/packages/ui/src/components/Slider/Slider.module.css b/packages/ui/src/components/Slider/Slider.module.css
index a84be7a306..69fc8784f9 100644
--- a/packages/ui/src/components/Slider/Slider.module.css
+++ b/packages/ui/src/components/Slider/Slider.module.css
@@ -90,7 +90,7 @@
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
     cursor: grab;
     transition: transform 200ms;
-    
+
     /* Fix: Ensure thumb is vertically centered on track */
     top: 50%;
     transform: translateY(-50%);
@@ -118,15 +118,15 @@
     opacity: 0.6;
     cursor: not-allowed;
 
-    .bui-SliderTrack {
+    & .bui-SliderTrack {
       background: var(--bui-bg-neutral-2);
     }
 
-    .bui-SliderTrackFill {
+    & .bui-SliderTrackFill {
       background: var(--bui-bg-neutral-4);
     }
 
-    .bui-SliderThumb {
+    & .bui-SliderThumb {
       cursor: not-allowed;
       background: var(--bui-bg-neutral-4);
       border-color: var(--bui-border-neutral);
diff --git a/packages/ui/src/components/Slider/Slider.stories.tsx b/packages/ui/src/components/Slider/Slider.stories.tsx
index b03f45412c..7ac48b877b 100644
--- a/packages/ui/src/components/Slider/Slider.stories.tsx
+++ b/packages/ui/src/components/Slider/Slider.stories.tsx
@@ -110,8 +110,9 @@ export const Percentage = meta.story({
   args: {
     label: 'Completion',
     minValue: 0,
-    maxValue: 100,
-    defaultValue: 65,
+    maxValue: 1,
+    step: 0.01,
+    defaultValue: 0.65,
     formatOptions: {
       style: 'percent',
       minimumFractionDigits: 0,
diff --git a/packages/ui/src/components/Slider/Slider.tsx b/packages/ui/src/components/Slider/Slider.tsx
index 3bfb407504..f83f93b51a 100644
--- a/packages/ui/src/components/Slider/Slider.tsx
+++ b/packages/ui/src/components/Slider/Slider.tsx
@@ -27,7 +27,6 @@ import { FieldError } from '../FieldError';
 import type { SliderProps } from './types';
 import { useDefinition } from '../../hooks/useDefinition';
 import { SliderDefinition } from './definition';
-import styles from './Slider.module.css';
 
 function SliderImpl<T extends number | number[]>(
   props: SliderProps<T>,
@@ -41,11 +40,10 @@ function SliderImpl<T extends number | number[]>(
     secondaryLabel,
     defaultValue,
     value,
+    isRequired,
     ...restProps
   } = props;
 
-  const isRequired = (props as any).isRequired;
-
   useEffect(() => {
     if (!label && !ariaLabel && !ariaLabelledBy) {
       console.warn(
@@ -63,12 +61,9 @@ function SliderImpl<T extends number | number[]>(
 
   const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);
 
-  // Determine if this is a range slider (array value) or single value
-  const isRange = Array.isArray(defaultValue) || Array.isArray(value);
-
   return (
     <AriaSlider
-      className={clsx(classes.root, styles[classes.root], className)}
+      className={clsx(classes.root, className)}
       {...dataAttributes}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
@@ -78,15 +73,13 @@ function SliderImpl<T extends number | number[]>(
       ref={ref}
     >
       {label && (
-        <div className={clsx(classes.header, styles[classes.header])}>
+        <div className={classes.header}>
           <FieldLabel
             label={label}
             secondaryLabel={secondaryLabelText}
             description={description}
           />
-          <SliderOutput
-            className={clsx(classes.output, styles[classes.output])}
-          >
+          <SliderOutput className={classes.output}>
             {({ state }) =>
               state.values
                 .map((_, i) => state.getThumbValueLabel(i))
@@ -95,51 +88,40 @@ function SliderImpl<T extends number | number[]>(
           </SliderOutput>
         </div>
       )}
-      <SliderTrack className={clsx(classes.track, styles[classes.track])}>
-        {({ state }) => (
-          <>
-            {(() => {
-              const numThumbs = state.values.length;
+      <SliderTrack className={classes.track}>
+        {({ state }) => {
+          const numThumbs = state.values.length;
 
-              // Calculate track fill
-              let trackFillStyle: React.CSSProperties;
-              if (numThumbs === 1) {
-                // Single thumb: fill from start to thumb
-                const percent = state.getThumbPercent(0);
-                const isVertical = state.orientation === 'vertical';
-                trackFillStyle = isVertical
-                  ? { bottom: 0, height: `${percent * 100}%` }
-                  : { left: 0, width: `${percent * 100}%` };
-              } else {
-                // Range: fill between thumbs
-                const start = state.getThumbPercent(0);
-                const end = state.getThumbPercent(1);
-                const rangePercent = (end - start) * 100;
-                const isVertical = state.orientation === 'vertical';
-                trackFillStyle = isVertical
-                  ? { bottom: `${start * 100}%`, height: `${rangePercent}%` }
-                  : { left: `${start * 100}%`, width: `${rangePercent}%` };
-              }
+          // Calculate track fill
+          let trackFillStyle: React.CSSProperties;
+          if (numThumbs === 1) {
+            // Single thumb: fill from start to thumb
+            const percent = state.getThumbPercent(0);
+            const isVertical = state.orientation === 'vertical';
+            trackFillStyle = isVertical
+              ? { bottom: 0, height: `${percent * 100}%` }
+              : { left: 0, width: `${percent * 100}%` };
+          } else {
+            // Range: fill between thumbs
+            const start = state.getThumbPercent(0);
+            const end = state.getThumbPercent(1);
+            const rangePercent = (end - start) * 100;
+            const isVertical = state.orientation === 'vertical';
+            trackFillStyle = isVertical
+              ? { bottom: `${start * 100}%`, height: `${rangePercent}%` }
+              : { left: `${start * 100}%`, width: `${rangePercent}%` };
+          }
 
-              return (
-                <div
-                  className={clsx(classes.trackFill, styles[classes.trackFill])}
-                  style={trackFillStyle}
-                />
-              );
-            })()}
-            <SliderThumb
-              index={0}
-              className={clsx(classes.thumb, styles[classes.thumb])}
-            />
-            {isRange && (
-              <SliderThumb
-                index={1}
-                className={clsx(classes.thumb, styles[classes.thumb])}
-              />
-            )}
-          </>
-        )}
+          return (
+            <>
+              <div className={classes.trackFill} style={trackFillStyle} />
+              <SliderThumb index={0} className={classes.thumb} />
+              {numThumbs > 1 && (
+                <SliderThumb index={1} className={classes.thumb} />
+              )}
+            </>
+          );
+        }}
       </SliderTrack>
       <FieldError />
     </AriaSlider>
@@ -149,6 +131,6 @@ function SliderImpl<T extends number | number[]>(
 /** @public */
 export const Slider = forwardRef(SliderImpl) as <T extends number | number[]>(
   props: SliderProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },
-) => ReturnType<typeof SliderImpl>;
+) => JSX.Element;
 
-(Slider as any).displayName = 'Slider';
+Slider.displayName = 'Slider';