Rangeslider range expands beyond data range and can’t be reset

I am copying this issue from a post on the plotly forum (https://community.plot.ly/t/rangeslider-range-expands-beyond-data-range-and-cant-be-reset/32193). Apparently this is a bug, and I am hopeful that posting it here helps others.

Basically: The rangeslider range can be expanded beyond the range of the actual data. Once this happens, it’s not possible to reset the range slider range.

Any help on this issue would be appreciated! Is it a known issue? Is my config wrong?

Here is as gif (which is a copy of the one on the forum post):

Here is a reproducible code sandbox: https://codesandbox.io/s/cool-hill-zdlh7
Uses: plotly-js, and react

I’ve tried a variety of things to fix this, but have not found a solution.

Is there a way to set the range programatically?

for instance: if range > limit, range = limit
Is there a config/layout option to limit the range?

I have found working examples that DON’T exhibit this behavior here:
https://plot.ly/python/range-slider/

Possibly I can look into fixing this myself but I am not familiar with the codebase. In addition, I see lots of room for improvement in the rangeslider behavior, adopting ideas from the C3 sub-graph, and the like.

Some possible changes to the behavior:
We could make it so the range slider can't move beyond the graph's actual data range. Although, would this cause issues for a graph that allows zooming out far away from the data?

We could simply allow the range slider to collapse back a preferred size which matches the entire data set. This must happen on graph initialization anyway. It could be tied to double-click.

Also, a little off topic, but it may not even make sense to have the range slider directly attached to the original graph... what if it was simply a separate graph component, fed the same (or additional) data as the main graph, except with a selectable area. This might also address some of the customizability limitations of the rangeslider. In fact, the zoom-rectangle and left-right zoom handle functionality is already there, the graph just hast to NOT zoom in after the selection is made and report it back to a callback, which can be fed to another graph. Similar to the selectable area of the react-vis 2d-draggable-area

首先运行链接的 CodeSandbox 重现，并将 rangeslider 的行为与所引用的正常工作示例进行比较。跟踪 plotly.js 中 rangeslider 的入口点，以确定其范围是如何扩展和重置的。完成的标准是：达成一致的预期行为，实现可复现的修复，并验证范围可以恢复且不会破坏有效的缩放。