Keep Page and Slider in sync, without getting stuck

Overview

Keep the positions of a slider and a page in sync. This sounds straightforward but there's a catch: the page/slide will stop moving after the first run, if we don't take some special care.

Key points

Props

• Page props:
  • currentPage
  • onChangePage
• Slider props (I'm using this one in the example)
  • value
  • onValueChange

Prevent infinite loop

We'll run into an infinite loop if we write the code override like this:

export const Page: Override = () => {
  return {
    currentPage: data.currentPage,
    onChangePage(value) {
      data.currentPage = value
    },
  }
}

You see, if the onChangePage event is fired, it'll set data.currentPage which will call onChangePage again!

To prevent this from happening, we'll use a conditional to guard it:

export const Page: Override = () => {
  return {
    currentPage: data.currentPage,
    onChangePage(value) {
      if (data.currentPage !== value) {
        data.currentPage = value;
      }
    }
  };
};