🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Can I bind two components to each other?

Version:
Dash 0.35.2
dash_core_components 0.42.1
dash_html_components 0.13.5

Code:

dhc.Div(children=[
dcc.Slider(
id=‘sld-adjusttime’,
min=-120,
max=120,
step=0.01,
value=0
)]
),
dhc.Div(children=[
dcc.Input(
id=‘inp-adjusttime’,
type=‘number’,
value=0,
step=0.01
)]
),

@app.callback(
Output(‘sld-adjusttime’, ‘value’),
[Input(‘inp-adjusttime’, ‘value’)]
)
def sldadj2inpadj(inpval):
return inpval

@app.callback(
Output(‘inp-adjusttime’, ‘value’),
[Input(‘sld-adjusttime’, ‘value’)]
)
def inpadj2sldadj(sldval):
return sldval

It will cause infinite loop to modify each other value?
In my app, slider can modify input value, but input can not reversely.
The same question at: Synchronize components bidirectionally

I think I can create a new component, include both input and slider component, synchronize them at fontend with javascript.

I think that the desired behavior can be achieved, if you raise an error inside the callbacks if the inputs are the same, e.g.

dash.exceptions.PreventUpdate()