Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Plotly Range Slider Functionality in Dash

Is it possible to get the same range slider functionality found in plotly in Dash?

Here’s what I’m talking about:

In the plotly version of a range slider, you essentially get a small zoomed out version of your plot that you can manipulate the plot range with that you can drag and move along the x axis. I would call this a zoom slider.

Yes it is!

Both range sliders are possible in dash.

The standalone slider that can be used as an input for a callback for example, is over here:

The one that is part of a chart, is actually built in to the graph object and can be configured in the figure layout:

layout = go.Layout(
    xaxis = dict(
        rangeslider = {'visible': True},

Hope this helps!

Awesome. This helps so much!. Thanks.

Hi, can the range slider that is attached to the graph object be used as an input for a callback?
I’m interested in making the range selection not refresh to the default range whenever the graph gets refreshed

Did anyone have an answer for this?

Hi, I ran into the issue of creating a callback for a rangeslider attached to the axes of a graph too.

To do so, use the relayoutData property of a graph in a callback. When a user uses the rangeslider to change the range of an axes, the values within dictionary relayoutData will be changed.

See here, first example provided.