Slider control is not interactive if slider's parent is referenced as a State or Input in another callback

Dash Python
1

I have a dynamic dropdown which dynamically creates interactive controls underneath a div.
I’m trying to make a callback which interacts with the div’s interactive control values.
I’m not sure if this is the best way to do this - if not I’m open to other approaches.

I’m running into issues where if a callback references div children property, the Slider can’t be modified anymore in the browser. To demonstrate, run this code and try to change the value of the slider. The value will revert back to it’s original set value.

If it remove the references to State(‘container’, ‘children’), the slider is interactive again.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown(id='dummy_dropdown'),
    html.Div(id='container'),
    html.Button('Click', id='button'),
    html.Div(id='button_output'),
])

@app.callback(
    Output('container', 'children'),
    [Input('dummy_dropdown', 'value')])
def dropdown_cb(_):
    return html.Div(dcc.Slider(id='dynamic_slider1', min=0, max=10, value=5, marks={i:{'label':i} for i in range(1, 10)}))

@app.callback(
    Output('button_output', 'children'),
    [Input('button', 'n_clicks')],
    [State('container', 'children')])
def button_cb(n_clicks, _not_used_in_example):
    return html.P(str(n_clicks))

if __name__ == '__main__':
    app.run_server(debug=True)