Dash(Python) - can't update Slider's values based on input from another Slider

Question

I've started learning Dash(after using R-Shiny for ~3months). During which I've tried to make an app, which will have two Sliders, one of whose values(min, max, step) are fixed and values of the other Slider will be updated based on the input from first Slider. And I couldn't update values of second Slider.
Here's what I've done and tried:

from dash import Dash
import dash_html_components as dash_html
import dash_core_components as dash_core
from dash.dependencies import Input, Output
from flask import Flask

# initiate the dash app with Flask server
app = Dash(__name__, server=Flask(__name__))


# code the ui now
app.layout = dash_html.Div(children=[
    dash_core.Slider(id="first_slider",
                     min=10, max=110, value=10, step=10,
                     marks={i : '{}'.format(i) for i in range(10,110,10)},
                     # marks={i : 'Level {}'.format(i) for i in range(10,110,10)}
                     ),
    dash_html.Hr(), dash_html.Hr(),

    # second slider
    dash_core.Slider(id="second_slider"),
    # # dash_html.Hr(),

    # print values from both sliders
    dash_html.Div(id="display_selected_values"),
    ])


# take the input from first and update second slider
@app.callback(Output(component_id='second_slider', component_property=['min','max']),
                                           # component_property='children'),
                                           # component_property='value'),
              [Input(component_id='first_slider', component_property='value')])
def print_the_value_from_slider(value_from_slider):
    # update the values of second slider. ex: if input is 10, second slider will have 11 to 20
    # return value_from_slider
    return list((value_from_slider+1, value_from_slider+1+10))

# @app.callback(Output(component_id="second_slider", component_property='options'),
#               [Input(component_id='second_slider', component_property='value')])
# def fill_second_slider(value_from_first_slider):
#     return range(value_from_first_slider+1, value_from_first_slider+1+10, 1)


# @app.callback(Output('display_selected_values', 'children'),
#               [Input('first_slider', 'value'),
#                Input('second_slider', 'value')])
# def set_display_children(first_input, second_input):
#     return '{} from {}s range'.format(second_input, first_input)

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

and the error is:

dash.exceptions.NonExistentPropException: 
Attempting to assign a callback with
the property "['min', 'max']" but the component
"second_slider" doesn't have "['min', 'max']" as a property.

Here are the available properties in "second_slider":
['id', 'marks', 'value', 'className', 'disabled', 'dots', 'included', 'min', 'max', 'tooltip', 'step', 'vertical', 'updatemode', 'loading_state']

But, Slider does have min and max properties and they are listed in error too. I don't know what I'm doing wrong. But, the second slider is not getting updated.

coralvanda · Accepted Answer · 2019-09-03 23:17:22Z

2

The slider does have the min and max props, but you are trying to set a single prop [min, max] which does not exist. You need two outputs on your callback, one to each prop.

@app.callback([Output(component_id='second_slider', component_property='min'),
               Output(component_id='second_slider', component_property='max')]
              [Input(component_id='first_slider', component_property='value')])

That should work.

answered Sep 3, 2019 at 23:17

coralvanda

6,6562 gold badges17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naveen Reddy Marthala Over a year ago

Also, how do i update marks of second slider now? Do I now have to write one more callback function? and how do i do that?

coralvanda Over a year ago

You can add another Output to the list in the callback, and add another value to the list you return at the end of the callback function. You could add a separate callback function if you want, but I think handling it all in the same function is probably best here.

Naveen Reddy Marthala Over a year ago

will you please be able to answer my another question on dash. stackoverflow.com/questions/58076801/…

Collectives™ on Stack Overflow

Dash(Python) - can't update Slider's values based on input from another Slider

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related