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.

7

any examples that utilize the rangeslider? current direction is a bit esoteric.

For instance, I understand matching “component_id” and “component_property” with my graph ID and the relayout property, but I don’t understand what format that data takes - is it the max() and min()? Or a new dataframe? the example just does a json dump. Printing out the value of relayout, it’s just a dictionary of None and {“visible”: True}.

Any guidance on how to extract the data from the relayout property?

8

Hi,
So while I got https://dash.plotly.com/interactive-graphing?_gl=1*sosbxj*_gcl_au*MTU4NDY4NzUyMS4xNzMyNzE1NjM0*_ga*MjI3MzQ3NTEzLjE3MzI3MTU2MzQ.*_ga_6G7EE0JNSC*MTczMjcxNTYzNC4xLjEuMTczMjcxNjY2NC40MC4wLjA.

working to give me back ranges to select,
it seems that depending on whether grabbing in the ‘range slider and selector’ component or the line chart itself the arguments are different:

When choosing in the line chart:

{‘xaxis.range[0]’: ‘2024-11-19 13:07:23.0919’, ‘xaxis.range[1]’: ‘2024-11-19 13:17:18.4528’}

vs. when choosing in the summary range:

{‘xaxis.range’: [‘2024-11-19 13:07:23.0919’, ‘2024-11-19 13:20:19.9264’]}

Is it a bug or a feature? :wink:

Btw, please add a link referencing Part 3. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly to the ‘What About Dash?’ section here: Range slider and selector in Python since its been a bumpy ride to google page 3 over here from there :wink: