Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Range for selector is too large

Hi all,

I’ve gone through the slider tutorial here https://plot.ly/javascript/range-slider/ and applied it to a series of graphs I’ve been working on.

While the buttons and range selector work, the default range falls outside both the start and end dates of my data. This makes it such that when you click the “1m” button for the most recent month it doesn’t actually show anything.

See the image below for example of the slider at the bottom starting and ending outside of the data range

Does anyone know how to make it so the slider starts off matching the actual range for the data?

Thanks!

Strange. This should be working. Can you share a code snippet to help us debug?

In the meantime, here’s an example of a range slider with custom starting range: http://codepen.io/etpinard/pen/XdLBxa

Here is an example:

The default behaviour of rangesliders is to expand to the full range of the plot - this is “padded” to provide some empty space on either end of your dataset, so the rangeslider also has this space present to preserve a 1:1 mapping of the given range.

To achieve what you’re after, the best thing to do is to add an explicit range to your rangeslider layout attribute - this will constrain the range slider to the bounds you provide, and the plot will reflect this sizing as well (that is, there will be no empty “whitespace” at the beginning and end of your plot).

This is a fixed version of your example.

Hope that helps!

That does help, thanks so much!