Persistence and Callback problem

Dash Python
1

Hi, I’m taking my first steps here and encountering an issue. I have a RangeSlider and some Input fields. The idea is to update the Input fields when the RangeSlider selection limits change, and vice versa. I’ve created a callback to achieve this. This component will appear on multiple pages, and I want it to persist.

I’m able to persist the values when there’s no callback, but as soon as I add the callback, the persistence stops working. Here’s a minimal reproducible example of the error:

from dash import (Dash, html, dcc, Input, callback, ctx,
                  Output,no_update)
import dash_bootstrap_components as dbc
import numpy as np

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

vals = np.arange(35.7, 42.2, 0.1)

slider = dcc.RangeSlider(min=vals.min(), max=vals.max(),
                         marks={vals[3*i]: f"{i:.2f}" for i in range(5)},
                         value = [36,40], id='slider',
                         persistence=True)

inp1 = dbc.Input(id='inp1', value=36, persistence=True)
inp2 = dbc.Input(id='inp2', value=40, persistence=True)

app.layout = dbc.Container([html.Div("", id='text' ),dbc.Row([
    dbc.Col([ slider,inp1,inp2], ),
        ])
])

@callback(Output('inp1','value'),
          Output('inp2','value'),
          Output('slider','value'),
          [Input('inp1','value'),
          Input('inp2','value'),
          Input('slider','value')]
)
def update_vals(in1_val,in2_val,sl_val):
    trigger = ctx.triggered_id
    print(trigger)
    if trigger == 'inp1' or trigger == 'inp2':
        return in1_val,in1_val, [in1_val,in2_val]
    if trigger == 'slider':
        return sl_val[0],sl_val[1], sl_val
    else:
        return no_update,no_update, no_update


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

Additionally, I would like to know if it’s possible :

  1. To reverse the slider values, you can swap the min and max values of the dcc.RangeSlider component.
  2. For displaying tooltips with values that don’t coincide with the slider values, you can use the marks parameter of the dcc.RangeSlider to create custom labels for the slider positions. You can then use JavaScript and CSS to customize the tooltip display. However, this might require more complex customization and may not be straightforward to achieve within the Dash framework.
    Aditional I would like to know if there’s a way to “reverse” slider values (start from higher to lower). And if it’s possible to show as tooltip values that not coincide with the values of the slider (suppose a slider with val ‘i’ from 0 to 10 and tooltip showing values of a vector r[i] )

thanks!

1 Like