RangeSlider in bootstrap component breaking callback

Dash Python
1

Hey,

Has anyone had issues with callbacks not recognizing graph controls and such when they’re contained in dash bootstrap components?

I’m rewriting an app I wrote last year using dash bootstrap components and when I put a rangeslider for a graph instead a dbc.Row or dbc.Col, it errors on the callback like it can’t find the slider.

Works:

dbc.Row(
		dbc.Col(params, width=4)
	),
	
	html.Div(className='col-lg-8', 
		children=[
			html.H4("MW and Temperature By Year", style={'padding-top':'0px'}),
			dcc.Graph(
				id='graph',
				figure={
					'data': [
						go.Scatter(x=X, y=Y, mode='markers', marker = {'color':'#5bc0de', 'opacity':0.7, 'line': {'width': 0.5, 'color': 'white'}})
					],
					'layout': go.Layout(
							xaxis={'title': 'Temperature'},
							yaxis={'title': 'MW'},
							margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
							legend={'x': 0, 'y': 1},
					)
				}, animate=False, style={'height': '325px', 'width': '80vw'}
			),
		dcc.RangeSlider(
					id='year_slider',
					min=minYear,
					max=maxYear,
					value=[startYear, endYear],
					marks={i: str(i) for i in range(minYear, maxYear)}
		)], style={'padding-top': '5px', 'padding-bottom': '5px', 'width':'80vw', 'height': '350px'})

doesn’t work:

	dbc.Row(
		dbc.Col(params, width=6),
		html.Div(className='col-lg-8', 
		children=[
			html.H4("MW and Temperature By Year", style={'padding-top':'0px'}),
			dcc.Graph(
				id='graph',
				figure={
					'data': [
						go.Scatter(x=X, y=Y, mode='markers', marker = {'color':'#5bc0de', 'opacity':0.7, 'line': {'width': 0.5, 'color': 'white'}})
					],
					'layout': go.Layout(
							xaxis={'title': 'Temperature'},
							yaxis={'title': 'MW'},
							margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
							legend={'x': 0, 'y': 1},
					)
				}, animate=False, style={'height': '325px', 'width': '80vw'}
			),
		html.Div([dcc.RangeSlider(
					id='year_slider',
					min=minYear,
					max=maxYear,
					value=[startYear, endYear],
					marks={i: str(i) for i in range(minYear, maxYear)}
		)], style={'padding-top': '5px', 'padding-bottom': '5px', 'width':'80vw', 'height': '350px'})])
	)

I’ve tried using all dbc components, html divs with bootstrap css and a mix of the two, and the range slider only seems to work when it’s NOT contained in a dbc component. Is there a reason for this? Am I missing something?

2

Hey @vivalasvictoria,

I tried to run your examples, but you didn’t include your callback definitions, so I wasn’t sure if I was exactly recreating your app.

Do you get an error message either in the terminal or in your browser’s javascript console?

I made the following simple app and didn’t seem to be having any issues, could you try it on your end and see if you have the same issues with this example?

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import plotly.graph_objs as go
from dash.dependencies import Input, Output

X = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Y = [2, 4, 3, 6, 5, 1, 3, 6, 4, 7]

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Row(
    [
        dbc.Col(dcc.Graph(id="graph")),
        dbc.Col(
            dcc.RangeSlider(
                id="slider",
                min=0,
                max=10,
                value=[3, 6],
                marks={i: str(i) for i in range(10)},
            )
        ),
    ],
    style={"padding": "50px"},
)


@app.callback(Output("graph", "figure"), [Input("slider", "value")])
def update_graph(value):
    if value:
        l, r = value
        return go.Figure(data=[go.Scatter(x=X[l:r], y=Y[l:r], mode="markers")])
    return go.Figure()


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

Hello @tcbegley, thank you so much for responding! Sorry for not posting the entire code file, but it’s really long and I was trying to not post it all for clarity’s sake.

Despite my lack of information, your answer helped me fix it! I think I just wasn’t wrapping my rows and cols the way it wanted me to, and as a result my slider was getting lost in the void. I mirrored your example and it’s now working for me. Thank you so much!

1 Like