Create value of dcc.Rangeslider not working in callback

Dash Python
1

Hello,
It is my first post on this community. Please let me know if I should edit this post in order to help the community. I have read the different similar topic but couldn’t find a working solution.
I have been using Dash for some times and I have the following issue:

Context:
I need to create a dcc.RangeSlider with callback.
I succeeded to create the min and the max, but I cannot create the value.

Error:
When I am returning a list in the callback, I get the following error:

expected 1 , got 2

Here is the callback:

@dash_app.callback(Output('test_slider', 'value'), [Input('test_dumps', 'children')])
def build_slider_value(test_dumps):
    list_time = []
    for i in json.loads(test_dumps):
        list_time.append(i['time'])
    return [min(list_time), max(list_time)]

Nonethless, the value for the dcc.RangeSlider is supposed to be a list of two elements.

Any help would be appreciated.
Thank you,
Renaud

2

The callback for a rangeslider is triggered when it’s value changes, so if you need to alter the initial value(s) of the rangeslider, you can modify your callback to return a new dcc.rangeslider with all parameters set as desired.

4

I have tried but get the following error:

Code

@dash_app.callback([Output('test_slider', 'children'),]
                    , [ Input('test_dumps', 'children'),])
def build_slider_value(test_dumps):
    list_time = []
    for i in json.loads(test_dumps):
        list_time.append(i['time'])
    return dcc.RangeSlider(
            id = "range_slider",
            min = min(list_time),
            max = max(list_time),
            value=[min(list_time), max(list_time)])

Error:

dash.exceptions.InvalidCallbackReturnValue: The callback …test_slider.children… is a multi-output.
Expected the output type to be a list or tuple but got RangeSlider(id=‘range_slider’, value=[1571788800, 1572435471], min=1571788800, max=1572435471).

Any example of the solution you gave me?

5

Sooo…this is a “gotcha” in Dash. If you only have 1 output, use

Output('test_slider', 'children')

if you have more than one, include them as you did with []

6

Indeed!

I am still getting an error, which seems to indicate a problem to display the “test_slider” output. I am very sorry! I really appreciate the help:

for component_registration in self.callback_map[output][‘inputs’]:
KeyError: ‘…test_slider.children…’

I embbed the output of this call back in the dashapp layout like this:

html.Div(id = "test_slider")
7

Here is an example of it working…crude but it’s a quick implementation…

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dash import no_update

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(
    [
        dcc.Input(
            id='range_input',
            placeholder='Enter a value for range slider min ...',
            type='number',
            value=''
        ),
        html.Div(
            dcc.RangeSlider(
                id='range_slider',
                min=0,
                max=20,
                step=1,
                value=[5, 15],
                marks={i: '{}'.format(i) for i in range(5,16)}
            ),
            id='range_slider_div'
        )
    ])


@app.callback(
    dash.dependencies.Output('range_slider_div', 'children'),
    [dash.dependencies.Input('range_input', 'value')])
def update_output(min_value):
    if not min_value:
        return no_update

    return dcc.RangeSlider(
        id='range_slider',
        min=0,
        max=int(min_value)*5,
        step=1,
        value=[int(min_value), int(min_value)*5],
        marks={i: '{}'.format(i) for i in range(int(min_value), int(min_value)*5+1)}
    )


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

Thank you!
I could use this example!

2 Likes