Update Slider onChange/onChangeCommit

package.json

@@ -2,7 +2,7 @@
   "name": "@weng-lab/psychscreen-ui-components",
   "description": "Typescript and Material UI based components used for psychSCREEN",
   "author": "SCREEN Team @ UMass Chan Medical School",
-  "version": "0.8.0-a.3",
+  "version": "0.8.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Slider/Slider.tsx

@@ -22,7 +22,8 @@ export type SliderProps = MuiSliderProps & {
   defaultEnd: number;
   //Could do more strict input checking here by checking the min/max of the slider
   minDistance?: number;
-  onChange?: (value: number[]) => void;
+  onSliderChange?: (value: number[]) => void;
+  onSliderChangeCommitted?: (value: number[]) => void;
 };
 
 function valuetext(value: number) {
@@ -35,9 +36,9 @@ const RangeSlider: React.FC<SliderProps> = (props: SliderProps) => {
     [props.defaultStart, props.defaultEnd]
   );
 
-  //Triggers when component updates, allows the value to be extraced in an onChange() function
+  // Triggers when component updates, allows the value to be extraced in an onChange() function
   useEffect(() => {
-    props.onChange && props.onChange(value);
+    props.onSliderChange && props.onSliderChange(value);
   })
 
   //Check if declared, if not set to MUI slider defaults
@@ -81,6 +82,8 @@ const RangeSlider: React.FC<SliderProps> = (props: SliderProps) => {
     }
   };
 
+  const handleSliderChangeCommited = () => {props.onSliderChangeCommitted && props.onSliderChangeCommitted(value)}
+
 
   //On a user pressing enter, decides if the temp value is valid and posts it, or corrects the temp value
   const handleInputEnter0 = (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -172,12 +175,14 @@ const RangeSlider: React.FC<SliderProps> = (props: SliderProps) => {
         getAriaLabel={() => 'Minimum distance'}
         value={value}
         onChange={handleSliderChange}
+        onChangeCommitted={handleSliderChangeCommited}
         valueLabelDisplay="auto"
         getAriaValueText={valuetext}
         disableSwap
         min={sliderMin}
         max={sliderMax}
         step={sliderStep}
+        {...props}
       />
       <Grid2 container spacing={1}>
         <Grid2 xs={5.5}>

stories/Slider.stories.tsx

@@ -70,7 +70,36 @@ export const onSliderChange = () => {
       defaultEnd={7}
       minDistance={1}
       step={0.5}
-      onChange={(value) => {
+      onSliderChange={(value) => {
+        setValue0(value[0])
+        setValue1(value[1])
+      }}
+    />
+    <Typography>
+      Value 0 = {value0}
+    </Typography>
+    <Typography>
+      Value 1 = {value1}
+    </Typography>
+  </>
+  );
+}
+
+export const onSliderCommit = () => {
+  const [ value0, setValue0 ] = React.useState<number>(0);
+  const [ value1, setValue1 ] = React.useState<number>(0);
+  return (
+  <>
+    <RangeSlider
+      title="Let's extract the value"
+      width={250}
+      min={0}
+      max={10}
+      defaultStart={3}
+      defaultEnd={7}
+      minDistance={1}
+      step={0.5}
+      onSliderChangeCommitted={(value) => {
         setValue0(value[0])
         setValue1(value[1])
       }}