diff --git a/packages/eds-core-react/src/components/Slider/Slider.stories.tsx b/packages/eds-core-react/src/components/Slider/Slider.stories.tsx index c72678c582..dad94296b3 100644 --- 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 = () => { const [value, updateValue] = useState([30, 70]) const changeHandler = ( event: ChangeEvent, - value: number[] | number, + value: number[], ) => { - updateValue(value as number[]) + updateValue(value) } return ( @@ -98,16 +98,13 @@ export const RangeSliderWithCommittedStep: StoryFn = () => { , - 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) }} /> diff --git a/packages/eds-core-react/src/components/Slider/Slider.tsx b/packages/eds-core-react/src/components/Slider/Slider.tsx index de96933cc0..190e947cf6 100644 --- 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, - newValue: number[] | number, - ) => void + onChange?: (event: ChangeEvent, 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(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(parsedValue) const [sliderValue, setSliderValue] = useState(parsedValue) const [mousePressed, setMousePressed] = useState(false) @@ -247,9 +246,10 @@ export const Slider = forwardRef(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])