Make onValueChanged optional and add marks and valueLabelDisplay prop…

…s to SliderInput Signed-off-by: Ayoub LABIDI <[email protected]>
gridsuite · Feb 10, 2025 · e422a3b · e422a3b
1 parent 9266b59
commit e422a3b
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/src/components/inputs/reactHookForm/numbers/SliderInput.tsx b/src/components/inputs/reactHookForm/numbers/SliderInput.tsx
@@ -11,10 +11,19 @@ import { identity } from '../utils/functions';
 
 export interface SliderInputProps extends SliderProps {
     name: string;
-    onValueChanged: (value: number | number[]) => void;
+    onValueChanged?: (value: number | number[]) => void;
 }
 
-export function SliderInput({ name, min, max, step, size = 'small', onValueChanged = identity }: SliderInputProps) {
+export function SliderInput({
+    name,
+    min,
+    max,
+    step,
+    size = 'small',
+    marks,
+    valueLabelDisplay,
+    onValueChanged = identity,
+}: SliderInputProps) {
     const {
         field: { onChange, value },
     } = useController({ name });
@@ -25,9 +34,20 @@ export function SliderInput({ name, min, max, step, size = 'small', onValueChang
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         activeThumb: number
     ) => {
-        onValueChanged(newValue);
+        onValueChanged?.(newValue);
         onChange(newValue);
     };
 
-    return <Slider size={size} min={min} max={max} step={step} value={value} onChange={handleValueChange} />;
+    return (
+        <Slider
+            size={size}
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={handleValueChange}
+            marks={marks}
+            valueLabelDisplay={valueLabelDisplay}
+        />
+    );
 }