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

Setting distance of range slider

I’ve got this code here:
dcc.Graph(
id=‘example-graph’,
figure={
‘data’: [
{‘x’: df[‘timestamp’], ‘y’: df[‘sens1’], ‘type’: ‘line’, ‘name’: ‘SF’},
],
‘layout’: {
‘title’: ‘Dash Data Visualization’,
‘xaxis’: dict(
rangeselector=dict(
buttons=list([
dict(count=‘1’,
id=‘range-slider’,
step=‘1’,
stempmode=‘backward’,
min=‘0’,
max=‘20’,
value=[‘0’,‘20’])
])
),
rangeslider=dict(
id=‘range-slide’,
step=’.0001’,
min=‘0’,
max=‘20’,
value=‘0’,
),
type=‘time’
)
}
}
)
])

Which gives me a range slider that looks like this:

I’d like the slider to start out looking something like this when the page is first loaded:

I thought the min/max parameter would work for setting the values of the range slider.

Where did you find min/max?

In general, check out https://plot.ly/python/reference/ to see all of the available options in the dcc.Graph component. Then, use the search bar for the parent object. It looks like you’ll want the range property:

I’m attempting to have my plot load without the full range showing. I tried the range property but had no luck (yet). I’ve got:

“xaxis”: {
“autorange”: True,
“range”: [“2015-02-17”, “2017-02-16”],
“rangeselector”: {“buttons”: [
{
“count”: 1,
“label”: “1m”,
“step”: “month”,
“stepmode”: “backward”
},
{
“count”: 6,
“label”: “6m”,
“step”: “month”,
“stepmode”: “backward”
},
{“step”: “all”}
]},
“rangeslider”: {
“range”: [“2016-10-01”, “2017-02-16”],
# “autorange”: True,
# “range”: [“2015-02-17”, “2017-02-16”],
# “yaxis”: {“rangemode”: “match”},

}, 
"title": "AAPL High, x; AAPL Low, x", 
"type": "date"

},