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

asdFletcher commented 4 years ago

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

jay-bis commented 4 years ago

Came across your post today, and just finished working on a solution I believe works. I tested it out on a few examples and it seems to get rid of the problem.

Like you, I'm not very familiar with the codebase (and also trying to contribute to OSS for the first time!), so I don't know if this would interfere with any other code. What I've done is just created a couple simple checks to see if the sliderRange's new range is 'out of bounds' in reference to the graph's range, and if so, setting the sliderRange's range to the graph's range appropriately.

I'd be more than happy to create a PR and have someone take a look at it.

etpinard commented 4 years ago

Focusing the on "bug report" part of this ticket

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.

The problem seems to occur when dragging the un-dimmed area of the range slider, regardless on initial condition and/or previous interactions.

Starting from https://codepen.io/etpinard/pen/mdyMOeN

Peek 2019-12-27 16-22