Black Lives Matter. Please consider donating to Black Girls Code today.

Hover over slider shows the slider value

I’m creating a slider over a large timestamps of timeseries. Since the timestamp range is too large, a little movement of the slider goes off the mark. I want to see where to drag slider to by using the hover text over the slider which shows the timestamp at that location, but I can’t find a way to do it. I know we can use marks to set the ticks, but I want to see the value between the ticks by hovering over the slider.


Hi there, thanks for writing in!

The problems you’re running into with ticks makes sense. Adding over text over a slider sounds like a unique solution, but isn’t possible given the current state of the component.

One thing I would try is using plotly’s built in range sliders:

The graph reacts directly to the range slider, so you can use the X axis to get information on how you’re sliding. Then, you can use relayout to gather information about the newly selected range: