🐛Slider: fix type, allow array val for non-range (#3076)

equinor · Oct 9, 2023 · 5dcf2ad · 5dcf2ad
1 parent b42752d
commit 5dcf2ad
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/packages/eds-core-react/src/components/Slider/Slider.stories.tsx b/packages/eds-core-react/src/components/Slider/Slider.stories.tsx
@@ -69,9 +69,9 @@ export const RangeSlider: StoryFn<SliderProps> = () => {
   const [value, updateValue] = useState([30, 70])
   const changeHandler = (
     event: ChangeEvent<HTMLInputElement>,
-    value: number[] | number,
+    value: number[],
   ) => {
-    updateValue(value as number[])
+    updateValue(value)
   }
 
   return (
@@ -98,16 +98,13 @@ export const RangeSliderWithCommittedStep: StoryFn<SliderProps> = () => {
       <Slider
         aria-label="Range slider with a lot of steps"
         value={value}
-        onChange={(
-          event: ChangeEvent<HTMLInputElement>,
-          value: number[] | number,
-        ) => {
-          updateValue(value as number[])
+        onChange={(event, value) => {
+          updateValue(value)
         }}
         min={0}
         max={500}
         onChangeCommitted={(event, value) => {
-          updateValueCommited(value as number[])
+          updateValueCommited(value)
         }}
       />
       <Typography variant="caption">

diff --git a/packages/eds-core-react/src/components/Slider/Slider.tsx b/packages/eds-core-react/src/components/Slider/Slider.tsx
@@ -191,14 +191,11 @@ export type SliderProps = {
   /** Components value, range of numbers */
   value: number[] | number
   /** Function to be called when value change */
-  onChange?: (
-    event: ChangeEvent<HTMLInputElement>,
-    newValue: number[] | number,
-  ) => void
+  onChange?: (event: ChangeEvent<HTMLInputElement>, newValue: number[]) => void
   /** Function to be called when value is committed by mouseup event */
   onChangeCommitted?: (
     event: MouseEvent | KeyboardEvent,
-    newValue: number[] | number,
+    newValue: number[],
   ) => void
   /** Function for formatting the displayed value. E.g. formatting dates, or adding a unit suffix */
   outputFunction?: (value: number) => string
@@ -234,8 +231,10 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
   },
   ref,
 ) {
-  const isRangeSlider = Array.isArray(value)
-  const parsedValue: number[] = isRangeSlider ? value : [value]
+  const isNumber = !Array.isArray(value)
+  const isRangeSlider = !isNumber && value.length === 2
+
+  const parsedValue: number[] = isNumber ? [value] : value
   const [initalValue, setInitalValue] = useState<number[]>(parsedValue)
   const [sliderValue, setSliderValue] = useState<number[]>(parsedValue)
   const [mousePressed, setMousePressed] = useState<boolean>(false)
@@ -247,9 +246,10 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(
         setSliderValue(value)
       }
     } else {
-      if (value !== initalValue[0]) {
-        setInitalValue([value])
-        setSliderValue([value])
+      const numberValue = Number(value)
+      if (numberValue !== initalValue[0]) {
+        setInitalValue([numberValue])
+        setSliderValue([numberValue])
       }
     }
   }, [value, initalValue, isRangeSlider])