Independent scroll time-picker on hover using react-slick

Question

I am building a time picker using react-slick library for carousels like below:

Client asked me to have an ablity for scrolling time using mouse wheel. I managed to implement it, however when I scroll using mouse, all pickers scroll at once. The idea is to have each time picker independent scroll when hovering over them. Here is what I have so far:

My code

Can anyone assist me with that ?

Answer 1

2 things :

• in your listener, you should use a boolean each time (if (e.target.closest('.slider1'))
• you should use swiper if you need your sliders to be scrolled, it's built in. (https://swiperjs.com/react/)

Answer 2

Here is what you could do to allow a scroll and hide the scrollbar:

<div
  style={{
    overflow: 'hidden'
  }}
>
  <div
    style={{
      height: '159px',
      width: '100px',
      overflow: 'auto',
      boxSizing: 'content-box',
      paddingRight: '17px',
    }}
  >
    <Slider
      {...settings}
      className='slider-entity hours'
      ref={(slider) => (this.slider1 = slider)}
    >
      <div>12</div>
      <div>13</div>
      <div>14</div>
      <div>15</div>
      <div>16</div>
    </Slider>
  </div>
</div>

I added the style directly for simplicity.

Height and width are mandatory on the child for the box-sizing property to works.

I based my answer on this thread