ui-core: allow slider to be updated front the outside

Signed-off-by: Valentin Chanas <[email protected]>

Author: anisometropie

ui-core/src/components/inputs/Slider.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { ChangeEvent, MouseEvent, InputHTMLAttributes } from 'react';
 
 import cx from 'classnames';
@@ -19,12 +19,17 @@ const Slider = ({
   onChange,
   onChangeCommitted,
   disabled,
+  className,
   ...rest
 }: SliderProps) => {
   const [value, setValue] = useState<number>(
     initialValue !== undefined ? Number(initialValue) : Number(min)
   );
 
+  useEffect(() => {
+    setValue(Number(initialValue));
+  }, [initialValue]);
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const newValue = Number(e.target.value);
     setValue(newValue);
@@ -38,7 +43,7 @@ const Slider = ({
   };
 
   return (
-    <div className={cx('range-wrapper', { disabled })} style={{ width: `${width}px` }}>
+    <div className={cx('range-wrapper', className, { disabled })} style={{ width: `${width}px` }}>
       <input
         type="range"
         className="range-slider"

ui-core/src/index.ts

@@ -24,6 +24,7 @@ export { default as RadioGroup, RadioGroupProps } from './components/inputs/Radi
 export { default as Select, SelectProps } from './components/Select';
 export { default as TextArea, TextAreaProps } from './components/inputs/TextArea';
 export { default as TimePicker } from './components/inputs/TimePicker';
+export { default as Slider } from './components/inputs/Slider';
 export {
   default as TolerancePicker,
   type TolerancePickerProps,