Unable to move both Sliders because they have the same state

Question

Hello guys I'm using react-multi-carousel with the custom slider functionality:

<Carousel
        ssr={false}
        ref={(val) => (Carousel = val)}
        partialVisbile={false}
        customButtonGroup={<CustomSlider />}
        itemClass='slider-image-item'
        responsive={responsive}
        containerClass='carousel-container-with-scrollbar'
        additionalTransfrom={additionalTransfrom}
        beforeChange={(nextSlide) => {
          if (nextSlide !== 0 && additionalTransfrom !== 150) {
            setAdditionalTransfrom(0);
          }
          if (nextSlide === 0 && additionalTransfrom === 150) {
            setAdditionalTransfrom(0);
          }
        }}
      >
        {carouselItems.map((t, index) => (
          <Card
            key={t.copy + index}
            quarter={t.quarter}
            title={t.title}
            description={t.description}
          />
        ))}
      </Carousel>

The customSlider is using carouselState to change the position of the displayed elements:

const CustomSlider = ({ carouselState }) => {
    let value = 0;
    let carouselItemWidth = 0;
    if (Carousel) {
      console.log(`Trending: ${Carousel.state}`);
      carouselItemWidth = Carousel.state.itemWidth;
      const maxTranslateX = Math.round(
        // so that we don't over-slide
        carouselItemWidth *
          (Carousel.state.totalItems - Carousel.state.slidesToShow) +
          150
      );
      value = maxTranslateX / 100; // calculate the unit of transform for the slider
    }
    const { transform } = carouselState;
    return (
      <div className='custom-slider'>
        <ArrowBackIosNewIcon style={{ width: 15, paddingTop: 11 }} />
        <input
          type='range'
          value={Math.round(Math.abs(transform) / value)}
          defaultValue={0}
          max={
            (carouselItemWidth *
              (carouselState.totalItems - carouselState.slidesToShow) +
              (additionalTransfrom === 150 ? 0 : 150)) /
            value
          }
          onChange={(e) => {
            if (Carousel.isAnimationAllowed) {
              Carousel.isAnimationAllowed = false;
            }
            const nextTransform = e.target.value * value;
            const nextSlide = Math.round(nextTransform / carouselItemWidth);
            if (e.target.value === 0 && additionalTransfrom === 150) {
              Carousel.isAnimationAllowed = true;
              setAdditionalTransfrom(0);
              // this.setState({ additionalTransfrom: 0 });
            }
            Carousel.setState({
              transform: -nextTransform, // padding 20px and 5 items.
              currentSlide: nextSlide,
            });
          }}
          className='custom-slider__input'
        />
        <ArrowForwardIosIcon style={{ width: 15, paddingTop: 11 }} />
      </div>
    );
  };

For a better understanding is the same thing as in the sandbox: https://codesandbox.io/s/2omn67p8kj

The problem is that when using two Carousel on the same page, the slider overwrites the other and only one works, I can drag the slider from one component, but can't move the other. My question is, if it's there a way for me to make them both work, I don't know how not to overwrite the state or how to use a different one.

Unable to move both Sliders because they have the same state

0 Answers0