External handler for slider position

src/ReactCompareImage.tsx

@@ -65,6 +65,7 @@ const ReactCompareImage: React.FC<IProps> = props => {
   const horizontal = !vertical;
 
   // 0 to 1
+
   const [sliderPosition, setSliderPosition] = useState<number>(
     sliderPositionPercentage,
   );
@@ -78,6 +79,11 @@ const ReactCompareImage: React.FC<IProps> = props => {
   const rightImageRef = useRef(null);
   const leftImageRef = useRef(null);
 
+  // control the slider position from outside
+  useEffect(() => {
+    setSliderPosition(sliderPositionPercentage);
+  }, [sliderPositionPercentage])
+
   // make the component responsive
   useEffect(() => {
     const containerElement = containerRef.current;

stories/index.stories.tsx

@@ -52,6 +52,24 @@ storiesOf('Basic', module)
       />
     </div>
   ))
+  .add('controlled slider position', () => {
+    const [position, setPosition] = useState<number|string>(0);
+    const [value, setValue] = useState<number|string>(0);
+    return (
+      <div style={{ maxWidth: '640px' }}>
+        <div style={{display: 'flex', gridGap: '5px'}} >
+          <input value={value} placeholder="0 to 1" onChange={(e) => setValue(e.target.value)} />
+          <button onClick={() => setPosition(value || 0)}>Override</button>
+        </div>
+        <ReactCompareImage
+          leftImage={img1Src}
+          rightImage={img2Src}
+          sliderPositionPercentage={position as number || 0}
+        />
+        <div>slider position: {position}</div>
+      </div>
+    );
+  })
   .add('detect slider position change', () => {
     const [position, setPosition] = useState(null);
     return (