Black Lives Matter. Please consider donating to Black Girls Code today.

Create value of dcc.Rangeslider not working in callback

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

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.

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?

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 []

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")

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

Thank you!
I could use this example!

2 Likes