I want to sync values from slider to input fields and vice versa. The number of sliders and inputs can vary, therefore i wanted to use Pattern-Matching Callbacks, but
i get an JS SyntaxError when using bootstrap with Pattern-Matching Callback, where the ids get the predefined JSON structure.
Uncaught (in promise) bootstrap-autofill-overlay.js:7651
SyntaxError: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘label[for=“{“index”:0,“type”:“coefficient-input”}”]’ is not a valid selector.
bootstrap-autofill-overlay.js:7651:
return element.getRootNode().querySelectorAll(labelQuerySelectors.replace(/\n/g, ""));
Error occurs when callback is triggered, but the callback does its work just fine. I am new to bootstrap, maybe other things may fail because of this? But does this mean i can’t use Pattern-Matching callbacks with bootstrap?
@callback(
[
Output({"type": "coefficient-slider", "index": MATCH}, "value"),
Output({"type": "coefficient-input", "index": MATCH}, "value")
],
[
Input({"type": "coefficient-slider", "index": MATCH}, "value"),
Input({"type": "coefficient-input", "index": MATCH}, "value")
],
prevent_initial_call=True
)
def sync_coefficient_controls(slider_value, input_value):
"""
Synchronize coefficient slider and input values.
Returns the triggering input's value to both outputs.
"""
ctx = dash.callback_context
if not ctx.triggered:
raise PreventUpdate
trigger = ctx.triggered[0]
prop_id = trigger['prop_id']
if '"type":"coefficient-slider"' in prop_id:
return slider_value, slider_value
return input_value, input_value
def generate_coefficient_sliders(n_freqs=DEFAULT_N_FREQS, initial_values=None):
"""Generate sliders for Fourier series coefficients."""
return dbc.Row(
[
dbc.Col(
[
dbc.Input(
type="number",
id={"type": "coefficient-input", "index": i},
value=initial_values[i],
min=0,
max=1,
step=0.1,
size="sm",
style={
"font-size": "0.8rem",
"maxWidth": "60px",
},
),
html.Div(
dcc.Slider(
min=0,
max=1,
value=initial_values[i],
vertical=True,
marks={
**{i/10: str(i/10) for i in range(1,10)},
0: "0.0",
1: "1.0"
},
id={"type": "coefficient-slider", "index": i},
updatemode="drag",
),
# style={"height": "200px"},
),
],
className="text-center",
)
for i in range(n_freqs)
],
className="g-1",
)
Thanks for any help