# Rangeslider range changes after callback

**URL:** https://community.plotly.com/t/rangeslider-range-changes-after-callback/45130
**Category:** Dash Python
**Created:** [September 20, 2020, 7:46pm UTC](https://community.plotly.com/t/rangeslider-range-changes-after-callback/45130 "2020-09-20T19:46:09Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![victormora](https://avatars.discourse-cdn.com/v4/letter/v/9e8a1a/32.png) [@victormora](https://community.plotly.com/u/victormora)
#### Post date: [September 20, 2020, 7:46pm UTC](https://community.plotly.com/t/rangeslider-range-changes-after-callback/45130/1 "2020-09-20T19:46:09Z")

</div>

I’m updating a chart using a simple callback that filters a dataframe. When I change the dropdown, the rangeslider updates to a range beginning at the year 2000. My time series begins 9/10/2020.

Any idea what may be going on?

```auto
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

def get_data():
	df = pd.read_csv('data.csv')
	df['timestamp'] = df['timestamp'].astype(str)
	return df

def get_fig(df, symbol):
	fig = px.line(df, x="timestamp", y="skew")
	fig.update_xaxes(rangeslider_visible=True)
	fig.update_layout(transition_duration=500)
	return fig

app.layout = html.Div(children=[
		html.H1(children='Hello Dash'),
		html.Div(children='Dash: A web application framework for Python.'),
		dcc.Dropdown(
				id='symbol',
				options=[{'label':x, 'value':x} for x in ['SPY', 'QQQ', 'IWM']],
				value='QQQ'
						),
		dcc.Graph(id='skew-graph')
])

df = get_data()

@app.callback(
	Output('skew-graph', 'figure'),
	[Input('symbol', 'value')])
def main(symbol):
	filtered_df = df.query("underlying==@symbol & expiration=='2020-10-16'")
	fig = get_fig(filtered_df, symbol)
	return fig

```

On load everything is ok:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/1/1f7ed65305de9569436da4e4231c7c2e08b8c7be.png)

After a selection from the dropdown, the rangeslider changes to an unusable range.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/1/165f7328e494f2d32f6b2a8386e0ac82417d6cd0.png)

these are the first 5 rows of the dataframe:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/8/8c2dec9fcdc379d7215834051d54b3db3d93563c.png)

---

<div class="post-metadata">

### Author: ![victormora](https://avatars.discourse-cdn.com/v4/letter/v/9e8a1a/32.png) [@victormora](https://community.plotly.com/u/victormora)
#### Post date: [September 23, 2020, 9:30pm UTC](https://community.plotly.com/t/rangeslider-range-changes-after-callback/45130/2 "2020-09-23T21:30:42Z")

</div>

would appreciate the help if anybody has any insight!

---

<div class="post-metadata">

### Author: ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)
#### Post date: [September 24, 2020, 1:44am UTC](https://community.plotly.com/t/rangeslider-range-changes-after-callback/45130/3 "2020-09-24T01:44:44Z")

</div>

Hi @victormora  
I saw your question but I’m not sure what the problem might be. Could it be that you’re using the callback function argument symbol that is confusing the app because the Dropdown id name is also symbol?

---

<div class="post-metadata">

### Author: ![victormora](https://avatars.discourse-cdn.com/v4/letter/v/9e8a1a/32.png) [@victormora](https://community.plotly.com/u/victormora)
#### Post date: [September 24, 2020, 3:47am UTC](https://community.plotly.com/t/rangeslider-range-changes-after-callback/45130/4 "2020-09-24T03:47:28Z")

</div>

Thanks for looking Adam! I tried changing the dropdown id but still had the same issue. I found the problem though! this is the line causing the issue:

```auto
fig.update_layout(transition_duration=500)

```

I removed that line and everything works as expected. Looks like a bug to me.