Error loading dependencies when using dynamically Slider

Dash Python
1

I received this Error Loading Dependencies when I updated the id to “date_slider” for my dynamic slider.

@app.callback(
dash.dependencies.Output(“graph”, “figure”),
[dash.dependencies.Input(“dropdown”, “value”),
dash.dependencies.Input(“date_slider”, “value”)])

Sorry I’m new here but is this the correct way of implementing? I want the value I chose on my slider to be captured in the def update_graph @app.callback so that it will dynamically plot the graph when I choose a value on the slider. Thanks!

app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=options, value = options[0]["value"]
        ),
    
    html.Div(id = "Slider"),

    html.Hr(), 
    
    dcc.Graph(id="graph", style={"height": 800}),
    
    html.Hr() ])

@app.callback(
    dash.dependencies.Output("Slider", "children"),
    [dash.dependencies.Input("dropdown", "value")])
def date(selected_node):
    dates_model = [*models_changed[selected_node].keys()]
    middle = round((len(dates_model)) / 2)
    max_ = len(dates_model) - 1
    mark = [0, middle, max_]
    marks = {i: {"label":str(dates_model[i]), "style": {"writing-mode":"vertical-lr", "text-orientation": "sideways",
                                                       "margin-bottom":"50px", "margin-left":"20px",
                                                       "margin-right": "20px"}} for i in mark}
    return dcc.Slider(id = "date_slider", min = 0, max = max_, value = 0,
                                marks = marks)



@app.callback(
    dash.dependencies.Output("graph", "figure"),
    [dash.dependencies.Input("dropdown", "value"),
     dash.dependencies.Input("date_slider", "value")])
def update_graph(selected_node, selected_date):
    dates_model = [*models_changed[selected_node].keys()]
    dates_model = dates_model[selected_date]
    node = models_changed[selected_node][dates_model]
2

Hi @zytan

I give a quick look into your code and this are my recomendation to find a solution:

  1. I don’t understand the [“value”] in your dropdown value property: value = options[0][“value”] but if it works do not answer.
  2. If you are not creating different slider dynamicaly,it is a better solution to include the slider in the layout and not in the callback, defining min = 0 and value = 0 and passing the max and marks values from the callback.
  3. In the second callback, instead of using the dropdown value as Input, use it as State to be sure that the callback is trigger when the slider value change and not when the dropdown value cange.

Hope that makes some clearity in your path to a solution. :smiley:

3

Hi @Eduardo ,

Thank you for your advice.

On

  1. This code is just a dictionary of labels i.e. {“labels”: i, “value”:i} to be shown in the dropdown. It works and thanks for looking at it.
  2. I understand it is better to be included in the layout but I need the slider to be dynamic as the dates for each data point is different, hence I did it this way.
  3. On the “State” that you have mentioned, are you suggesting it to be edited to dash.dependencies.State(“dropdown”, “value”)? If so, I’m still getting the error.

Thank you again

4

@zytan

  1. In your callback you don’t need to build the slider dynamically, you are using the callback to get the marks and the max value of the slider. You can do the same setting those slider properties (marks and max) as Callback Output.
    See that the return are sending just a dcc.slider, not a div with different sliders.
  2. Yes that’s was my suggestion. Could you share the error message?
1 Like
5

Hi @Eduardo

Thanks! Point 2 works and point 3 works too after I rearrange the State and Input variables. Have a great week ahead

6

Hey @zytan

Nice to know that it works :smiley:
Have a great week you too !!