Range slider emits relayout evt on mousemove, should be only on mouseup

[gregorybleiker]

I have had the need to do something after the rangeslider had changed (update the min/max somewhere else on the page). I did not find any event that fired only after the slider had been released (a.k.a. mouseup) so I changed the rangeslider/draw.js:

function mouseUp() {
            dragCover.removeEventListener('mousemove', mouseMove);
            dragCover.removeEventListener('mouseup', mouseUp);
            Lib.removeElement(dragCover);
// --> new code
            gd.emit('plotly_rangesliderend', {
                axis: axisOpts,
                opts: opts
// --> end new code
            });

Is this anything that would be merged? Should I do a PR?

[etpinard]

Hmm. That's interesting. One can already detect range slider updates by listening to plotly_relayout.

Can ask in what context a range-slider-specific event might become useful?

[gregorybleiker]

plotly_relayout fires permanentyl during drag (I'd have to debounce). Actually, I oversimplified the example. Based on the range slider of one graph several other graphs get updated, so it would be really bad to be doing that continuously during draging.

[etpinard]

plotly_relayout fires permanentyl during drag (I'd have to debounce)

Hmm. That might be a bug here. It should only fire on mouseup (just like regular zoombox dragmoode: 'zoom' interactions).

[Rapster]

Does anyone found a workaround for this (until it gets fixed)? I need to know what the range is once mouseup

[NixTheMan]

is there any plans to resolve this bug? Or is there a current workaround??

[MeMeMax]

We need this as well. Using the range slider currently fires too many events.

[cariacou]

The bug is still current as of latest Plotly. There is no easy way that I am aware of to:

• prevent relayouts while dragging the rangeslider
• get a callback on mouseup only

[czanbaka]

Has this been resolved, having the same problem years later! If not, does anyone recommend another library?

[jonasvdd]

Hi, I would also like to see this bug resolved, it would be amazing to add a "debounce" option on the range slider, so that it will only perform an update after mouseup

[ntaylor-ads]

It has been almost 7 years. How is this not fixed?

[ntaylor-ads]

Incidentally, it's not too hard to work around this with a clientside callback that debounces the trigger before modifying a dcc.store. Then have whatever callback you wanted subscribed to the trigger instead subscribe to that store. Looks something like this:

from dash import Input, Output, dcc, clientside_callback
plot = dcc.Graph()
dcc.Store(id="debounce")
clientside_callback(
    """
    function(relayout){
        var timeout;
        var later = function(){
            timeout = null;
            console.log(relayout);
            return relayout;
        }
        clearTimeout(timeout);
        timeout = setTimeout(later, 200);
    }
    """,
    Output("debounce", "data"),
    Input(plot, "relayoutData"),
)

@app.callback(
    Output(<target_component>),
    Input('debounce', 'data')
)
def callback(relayout):
    ...

[CarltonHenderson]

I like the current behavior and do not consider it a bug. I like that I can update my other charts live as the rangeslider is dragged. If you do consider this a bug, and you fix it, please give us a way to use the current behavior.