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

Bắt đầu bằng cách chạy bản tái hiện CodeSandbox được liên kết và so sánh hành vi của rangeslider với các ví dụ tham chiếu đang hoạt động đúng. Truy vết điểm vào của rangeslider trong plotly.js để xác định phạm vi của nó được mở rộng và đặt lại như thế nào. Công việc được xem là hoàn tất khi đã thống nhất hành vi mong đợi, có một bản sửa lỗi có thể tái hiện và đã xác minh rằng phạm vi có thể được khôi phục mà không làm hỏng việc thu phóng hợp lệ.