Plotly Range Slider Functionality in Dash

Dash Python
1

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.

2

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:

https://dash.plot.ly/dash-core-components/slider

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!

3

Awesome. This helps so much!. Thanks.

4

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

5

Did anyone have an answer for this?

6

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.

1 Like