Add external value control for Slider

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.3",
+  "version": "0.8.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/Slider/Slider.tsx

@@ -18,12 +18,13 @@ TODO: Have a browser popup when an invalid number is chosen
 export type SliderProps = MuiSliderProps & {
   title: string;
   width: number | string;
-  defaultStart: number;
-  defaultEnd: number;
+  defaultStart?: number;
+  defaultEnd?: number;
   //Could do more strict input checking here by checking the min/max of the slider
   minDistance?: number;
   onSliderChange?: (value: number[]) => void;
   onSliderChangeCommitted?: (value: number[]) => void;
+  value?: number[];
 };
 
 function valuetext(value: number) {
@@ -33,9 +34,17 @@ function valuetext(value: number) {
 const RangeSlider: React.FC<SliderProps> = (props: SliderProps) => {
   //value that the slider uses
   const [value, setValue] = React.useState<number[]>(
-    [props.defaultStart, props.defaultEnd]
+    [props.defaultStart || props.value && props.value[0] || -10,
+     props.defaultEnd || props.value && props.value[1] || 10]
   );
 
+  useEffect(() => {
+    if (props.value) {
+      setValue(props.value)
+      setTempValue(props.value)
+    }
+  }, [props.value])
+
   // Triggers when component updates, allows the value to be extraced in an onChange() function
   useEffect(() => {
     props.onSliderChange && props.onSliderChange(value);

stories/Slider.stories.tsx

@@ -2,20 +2,13 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { RangeSlider, SliderProps } from '../src';
 import "../src/App.css";
-import { MenuItem } from '@mui/material';
+import { Button, MenuItem, TextField } from '@mui/material';
 import Typography from '@mui/material/Typography';
 
 const meta: Meta<typeof RangeSlider> = {
   title: 'RangeSlider', 
   component: RangeSlider,
   tags: ['autodocs'],
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
   parameters: {
     controls: { expanded: true },
   },
@@ -112,4 +105,34 @@ export const onSliderCommit = () => {
     </Typography>
   </>
   );
+}
+
+export const managedValue = () => {
+  const [ value0, setValue0 ] = React.useState<number>(-10);
+  const [ value1, setValue1 ] = React.useState<number>(10);
+
+  return (
+  <>
+    <RangeSlider
+      title="You can reset this value externally"
+      width={250}
+      value={[value0, value1]}
+      min={-10}
+      max={10}
+      minDistance={1}
+      step={0.5}
+      onSliderChangeCommitted={(value) => {
+        setValue0(value[0])
+        setValue1(value[1])
+      }}
+    />
+    <Typography>
+      Value 0 = {value0}
+    </Typography>
+    <Typography>
+      Value 1 = {value1}
+    </Typography>
+    <Button onClick={() => {setValue0(-10); setValue1(10)}}>Set back to defaults</Button>
+  </>
+  );
 }