Two Linked Inputs

Dash Python
1

I’m trying to link two inputs together, but can’t figure out a way to do it without getting a circular dependency. In the following example, I’d like to link the ‘minutes-input’ and ‘hours-input’ field together. For example, if the user sets the value of ‘minutes-input’ to 180, I’d like the value of ‘hours-input’ to become 3.

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        dbc.FormGroup([
            dbc.Label("Minutes"),
            dbc.Input(type="number", id="minutes-input")
        ]),
    ]),
    html.Div([
        dbc.FormGroup([
            dbc.Label("Hours"),
            dbc.Input(type="number", id="hours-input")
        ]),
    ])
])

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

I use the callbacks

@app.callback(Output('minutes-input', 'value'),
    Input('hours-input', 'value'))
def update_minutes(hours):
    return hours*60

@app.callback(Output('hours-input', 'value'),
    Input('minutes-input', 'value'))
def update_hours(minutes):
    return hours/60

and this results in a circular dependency. Is there a design pattern that’s used for linked elements like this? Or is there a possible workaround I could use?

Thanks for the help