How to get a rangeslider to showing a subset by default?

📊 Plotly Python
1

I’m writing a plot for some clinicians who want to be able to scroll through a large-ish trace on a screen - think a 5-minute segment of time, but they want to scroll through it in 10-second wide windows.

I’d like to set up a plot such that it opens on a 10-second window, then you can scroll forwards and backwards with a rangeslider - preferably a fixed-width one. However, I can’t seem to get the range property of the rangeslider and x-axis to work in the way I’d expect.

No matter which way I put the ranges in, I just get it showing the full range right from the start. My MVE for the code is here. It:

  • Generates 30s of ‘trace’ from 1KHz data (a 1-second period sine wave)
  • Downsamples it to 50ms to be more plottable (just for parity with my real data work, no change if removed)
  • Tries to set the X-axis to show the first 1 second (points 0-200), and the rangeslider to show the full range (points 0-[-1])).
    • The same happens if I put the ranges the other way around?
from typing import Dict, List

import numpy as np
from numpy.typing import  NDArray
from pandas import DataFrame, to_timedelta
from plotly.graph_objects import Figure, Scatter, Layout


time_steps: NDArray = np.arange(0, 30001, step=1)

trace_df: DataFrame = DataFrame(
    index=to_timedelta(time_steps, unit='ms'),
    data={'value': np.sin(2 * np.pi * time_steps / 1000)}
)

# Resample so it's practical to plot
trace_df = trace_df.resample("50ms").asfreq("50ms")

# Set up the figure layout and data lists
layout: Dict[str, Dict] = {
    "xaxis": {
        "title_text": "Time (s)",
        "rangeslider": {
            "visible": True,
            "range": [
                trace_df.index[0], trace_df.index[-1]
            ],
        },
        "range": [
            trace_df.index[0], trace_df.index[200],
        ],
    },
}
data: List[Scatter] = [
    Scatter(
        x=trace_df.index, y=trace_df["value"],
        showlegend=False,
    )
]

# Plot the figure
figure: Figure = Figure(
    data=data, layout=Layout(**layout)
)
figure.show(renderer="browser")

If possible, I’d also like to set the window size as fixed 10s, and have the rangeslider window actually show a downsampled version of the trace (my ‘real’ application is for a 5-minute window of 1KHz data, and unsurprisingly Plotly chugs trying to render that!).

I’m using:

  • plotly==5.19.0
  • Windows 10 WSL/Ubuntu 24
  • Firefox