fix: reactive slider

Make it possible to change slider from outside the component.

packages/slider/src/component.tsx

@@ -19,7 +19,7 @@ export function Slider({ min = 0, max = 100, ...rest }: SliderProps) {
   }, [sliderLine]);
 
   const [value, setValue] = useState(rest.value);
-  const [position, setPosition] = useState(0);
+  const [position, setPosition] = useState(rest.value);
   const [dimensions, setDimensions] = useState({ left: 0, width: 0 });
   const [sliderPressed, setSliderPressed] = useState(false);
 
@@ -97,10 +97,10 @@ export function Slider({ min = 0, max = 100, ...rest }: SliderProps) {
   }, [position, rest.value, rest.step]);
 
   useEffect(() => {
-    if (sliderPressed || position === rest.value) return;
+    if (sliderPressed || position === rest.value || value === rest.value) return;
     setPosition(rest.value);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sliderPressed]);
+  }, [sliderPressed, rest.value]);
 
   return (
     <div className={c.wrapper}>

packages/slider/stories/Slider.stories.tsx

@@ -11,12 +11,13 @@ export const Regular = () => {
     <div>
       <output>{value}</output>
       <Slider
-        onChange={(value) => setValue(value)}
+        onChange={(val) => setValue(val)}
         value={value}
         min={1000}
         max={10_000_000}
         step={1000}
       />
+      <button onClick={() => setValue(2_500_000)}>Reset</button>
     </div>
   );
 };