search

zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
883 stars 231 forks source link

react-slider does not update on it's container / parent container style changes #172

Closed viters closed 4 years ago

viters commented 4 years ago

Description

react-slider does not update on it's container / parent container style changes, nor it does not export any API to call update imperatively.

Creating adaptive width react-slider is currently hard to achieve (e.g. in flex container). The positions of slider elements update only after window resize.

My use case: I use it within flex container with lazy loaded components nearby. I would need to observe whether all components did load and call window.resize or defer showing ReactSlider.

Example

https://stackblitz.com/edit/react-tj4zyk?file=index.js

viters commented 4 years ago

I wonder, what is the advantage of using pixels in calculating offset over using percentages? I assume percentage offsets would prevent resize issues.

stonebk commented 4 years ago

I'm not sure what the original reason for using pixels vs percentage was -- AFAIK, that's been around since the original implementation. Maybe @mpowaga could stop in and provide some insight?

I think the tricky part would be to figure out how to deal with the thumb handles. If they are butted up against each other, and then you increase the size of the container, the handle positions would probably not look right anymore as the slider length grows. If the thumb sizes were also proportionally sized, this wouldn't be an issue, but I would think most people would want a fixed sized thumb handle.

I think it might make sense in the short term to expose the resize function so that you can imperatively call it.

stonebk commented 4 years ago

Here is an example of calling resize using refs: https://github.com/zillow/react-slider/pull/177#issuecomment-629339271

stonebk commented 4 years ago

The docs have been updated with an example: https://zillow.github.io/react-slider/#!/ReactSlider/13

axelboc commented 4 years ago

Hi there, I can't seem to find the example in the linked docs.

Would you consider using ResizeObserver, when available (i.e. as progressive enhancement), to automatically resize the slider internally? This is a common pattern nowadays and there are libraries that make it trivial, like https://github.com/streamich/react-use/blob/master/docs/useMeasure.md ((implementation)[https://github.com/streamich/react-use/blob/master/src/useMeasure.ts]).