plotly rangeslider how to restore the limit bar on the slider

Question

I have a rangeslider with slided limits, I need to redraw the slider with the grey part like this. rangeslider example

If I save the range values from the layout and restore it, it affects the xaxis range for both the top and bottom, so it is not right. Perhaps something like limit-range?

Answer 1

This is a feature that was recently added in the v1.10.0 release (specifically, this PR.

If you'd like to set an initially selected range on a range-slider, you can use this syntax in your layout object:

{
  xaxis: {
    range: [20, 30] // this is the range the *selected area* of the slider spans
    rangeslider: {
      range: [0, 100] // this is the range the *entire* slider spans
    }
  }
}

The range slider will by default span the entire range of your data, however by specifying a rangeslider.range, you can constrain this span. We wanted to keep the interface familiar with a "regular" range, so the xaxis.range will still set the visible plot range and the slider will behave accordingly.

As an example, this mock data creates this image and there's a few other examples in those directories using range sliders as well.