Callback is called twice in a sigler event

In the next code ( is an example), callback is called twice in every single event. when you show the slider’s id the last id will be repeated in every short time period. Why? how i can fix it?

CODE:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
        dcc.Slider(
            id='{}'.format(i),
            min=0,
            max=20,
            step=0.5,
            value=10,
        ) for i in range(10)]),
    html.Div(id='slider-output-container')
])

def generate_inputs():
    return  [Input('{}'.format(_),'value') for _ in range(10)]

@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    generate_inputs()
)
def update_output(*values):
    ctx = dash.callback_context
    id = ctx.triggered[0]['prop_id'].split('.')[0]
    print(id)
    return 'You have selected "{}"'.format(values[0])


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

Wow this is weird, the issue seems to be related to the name of the sliders (just numbers), when I change it as below the problem disappears…

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
        dcc.Slider(
            id='slider_{}'.format(i),
            min=0,
            max=20,
            step=0.5,
            value=10,
            updatemode='mouseup',
        ) for i in range(10)]),
    html.Div(id='slider-output-container')
])

def generate_inputs():
    return  [Input('slider_{}'.format(_),'value') for _ in range(10)]

@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    generate_inputs()
)
def update_output(*values):
    ctx = dash.callback_context
    id = ctx.triggered[0]['prop_id'].split('.')[0]
    print(ctx.triggered, id, values)
    return 'You have selected "{}"'.format(values[int(id[-1])])


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

Hi Emmanuelle,

the problem doesnt disappears for me, change differents sliders and check it. In my real code (this is an example) the name of sliders are not numbers.

Im not in debug mode.

Can anyone help me or with the same problem?

Is the issue completely reproducible for you? The problem I have is that sometimes I have the same problem as you (as seen from the sequence of prints), and sometimes it behaves correctly. The best thing would be if you could record your screen with both the app and the terminal where the prints are displayed, for the record (we could then open an issue of the Dash Github).

When app start callback is called once (it’s ok):

When I change one slider the first time all is ok:

But when I change the second slider, callback is called twice every short time and the last id is showed:

I change a slider again and this:

this is my code:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div([
        dcc.Slider(
            id='slider_{}'.format(i),
            min=0,
            max=20,
            step=0.5,
            value=10,
            updatemode='mouseup',
        ) for i in range(10)]),
    html.Div(id='slider-output-container')
])


def generate_inputs():
    return  [Input('slider_{}'.format(i),'value') for i in range(10)]

@app.callback(
    dash.dependencies.Output('slider-output-container', 'children'),
    generate_inputs()
)
def update_output(*values):
    ctx = dash.callback_context
    id = ctx.triggered[0]['prop_id'].split('.')[0]
    print(ctx.triggered, id, values)
    return 'You have selected "{}"'.format(values[int(id[-1])])


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

I have been able to reproduce this problem. In my case it’s not intermittent, but consistent behavior as reported by @JoseMarqueses. After the initial slider selection, all subsequent slider selections result in 2 back-to-back callbacks - the first assoc. with the previously selected slider, and the second being the most recent. However, if I repeatedly select the same slider, the callback is only triggered once.

Initial Page Load

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_9.value",
      "value": 10
    }
  ],
  "inputs": {
    "slider_0.value": 10,
    "slider_1.value": 10,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

Selecting Initial Slider (slider_0)

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_0.value",
      "value": 7
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 10,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

Selecting A Different Slider (slider_1):

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_0.value",
      "value": 7
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 10,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}
###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_1.value",
      "value": 8.5
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 8.5,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

Selecting another different Slider (slider_2):

###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_1.value",
      "value": 8.5
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 8.5,
    "slider_2.value": 10,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}
###############################
 ctx = {
  "states": {},
  "triggered": [
    {
      "prop_id": "slider_2.value",
      "value": 5
    }
  ],
  "inputs": {
    "slider_0.value": 7,
    "slider_1.value": 8.5,
    "slider_2.value": 5,
    "slider_3.value": 10,
    "slider_4.value": 10,
    "slider_5.value": 10,
    "slider_6.value": 10,
    "slider_7.value": 10,
    "slider_8.value": 10,
    "slider_9.value": 10
  }
}

FWIW, utilzing daq.Slider vice dcc.Slider results in expected behavior - one callback per slider change.

1 Like

thank flyingcujo!!! daq.Slider resolve the problem. There is rangeSlider in dash_daq? im looking for it but i dont find it, and I need rangeSlider for my proyect.

daq doesn’t have a range slider…i just tested that to see if the problem was related to dcc.slider…vice some other wierd issue.

I still think this is a bug that should be reported via their github.

Will this be resolved in the next update?

Not sure… I don’t work for Dash/Plotly!