title: How to update chained dropdown value in Dash dcc?
body: <p>In dash, how do I update the values of one dropdown into another checklist or slider?
  In the below code, I am selecting one value from a dropdown which should update checklist values based on the selected value from the dropdown. Here I am partially successful in taking value from the dropdown but it's <strong>accumulating with older selected values in the checklist</strong>.
  Please find below part of the code.</p>
  
  <pre><code>import dash
  from dash.dependencies import Input, Output, State
  import dash_core_components as dcc
  import dash_html_components as html
  import dash_table
  import pandas as pd
  from dash.exceptions import PreventUpdate
  
  df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
  
  external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
  app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
  app.config['suppress_callback_exceptions'] = True
  
  app.layout = html.Div([
                  dash_table.DataTable(
                          id='datatable-upload-container',
                          columns=[{"name": i, "id": i} for i in df.columns],
                          data=df.to_dict('records'),
                          ),
                  html.Div(dcc.Dropdown(
                      id='data_selector1',
                      options=[
                          {'label': '', 'value': ''}
                          ],
                      value=[]
                      )
                  ),
                  html.Br(),
                  html.Div([
                      html.Div(id='numerical-slider'),
                      # this is a hack: include a hidden dcc component so that
                      # dash registers and serve's this component's JS and CSS
                      # libraries
                       dcc.Input(style={'display': 'none'})
                  ])
             ])
  
  @app.callback(Output('data_selector1', 'options'),
                [Input('datatable-upload-container', 'data')])
  def update_dropdown(rows):
      print('updating menus')
      numerical_col = [i for i in df.columns if df[i].dtypes != "object"]
      col_labels=[{'label' :k, 'value' :k} for k in numerical_col]
      return col_labels
  
  @app.callback(Output('numerical-slider','children'),
                [Input('data_selector1', 'value'),
                Input('datatable-upload-container', 'data')])
  def explanatory_cat_slider(value, rows):
      if value:
          categories, intervals = pd.cut(df[value], 3, retbins=True)
          return html.Div(html.Label([value,
                              dcc.RangeSlider(id='numerical-slider',
                                 min=min(intervals),
                                 max=max(intervals),
                                 step=None,
                                 marks={str(val): str(round(val,2)) for val in intervals},
                                 value = [intervals[0],intervals[-1]]
                                 )
                              ],style={'width': '50%', 'display': 'inline-block', 'textAlign': 'left'})
                          )
      else:
          return []
  
  if __name__ == '__main__':
      app.run_server(debug=False)
  </code></pre>
  
  <p>updated code...
  I am getting an issue with <strong>explanatory_cat_slider</strong>, it's not getting updated with new selected values.</p>
  
  <p><a href="https://i.stack.imgur.com/JubAy.png" rel="nofollow noreferrer">In the first image I can select one value of dropdown which automatically shows slider of that value</a></p>
  
  <p><a href="https://i.stack.imgur.com/Kronq.png" rel="nofollow noreferrer">In the second image sliders getting accumulated on upon other. How do I rectify this issue?</a></p>
  
  <p><a href="https://i.stack.imgur.com/pDhyu.png" rel="nofollow noreferrer">In the last image, how it becomes slider overlapped</a></p>