search

sghall / react-compound-slider

:black_medium_small_square: React Compound Slider | A small React slider with no opinion on markup or styles
https://react-compound-slider.netlify.com
MIT License
626 stars 80 forks source link

Dragging works incorrectly on wide slider with scrolls #142

Closed vasiliy-vdovichenko closed 3 years ago

vasiliy-vdovichenko commented 3 years ago

Hi I need really wide slider for dates, for this I have tried to make parent div to be 200% wide but it turned out that after this dragging doesn't works correctly.

When horizontal scroll is in left most position dragging works correctly. But when horizontal scroll is moved to right then active handle is shifted from the position I dragged or clicked.

Date time slider example which with 200% parent width

Is there any way to fix this problem?

Thank you

vasiliy-vdovichenko commented 3 years ago

I was able to fix the problem by wrapping that example component in

` <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", maxWidth: "100%" }}

<div style={{ overflowX: "auto" }}>`

See this example for details.