How to set position programmatically?

[akay0214]

Hi,

I'm using compare slider inside the modal window. Every time I open modal to compare images for a new item it renders compare strip at the same position I left it before. How do I reset it or set it programmatically?

Thanks,
Alexander.

[nerdyman]

Hey Alexander!

The component will always respect the position prop you pass to it so if you want to reset it when the modal opens you could store the position in a useState and change it whenever the modal opens with a useEffect.

I'm not sure how your modal is controlled but if it's with something like a visible prop you could always set the slider position to be 50 whenever visible is true.

E.g.

const [visible, setVisible] = useState(false);
const [position, setPosition] = useState(50);

useEffect(() => {
  // Always reset position when visible is true.
  if (visible) setPosition(50);
}, [visible]);

return <ReactCompareSlider position={position} />

Here's a super basic example https://codesandbox.io/s/react-compare-slider-simple-reset-example-vgkdh?file=/src/App.jsx

[akay0214]

It works only as an initial value, but after you use slider it doesn't react on anything in position variable. I'll double check my code tomorrow and I'll let you know.

[nerdyman]

This has been released in v3!

See the useReactCompareSliderRef example for usage.

npm install react-compare-slider@latest
yarn add react-compare-slider@latest
pnpm install react-compare-slider@latest