Just cant figure out a way to connect the rangeslider to the graph. someone help plis. I know Im doing it wrong but not able to figure it out :3
Hi @vidwatk and welcome to the Dash community 
Here is a small app that connects a range slider (and a checklist and dropdown) to a scatter plot. Hope it helps!
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import dash_bootstrap_components as dbc
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
df = px.data.gapminder()
def make_dropdown(id, option_list, option_val=0):
return dcc.Dropdown(
id=id,
options=[{"label": str(i), "value": i} for i in option_list],
value=option_list[option_val],
clearable=False,
)
def make_checklist(id, option_list):
return dcc.Checklist(
id=id,
options=[{"label": i, "value": i} for i in option_list],
value=[option_list[0]],
labelStyle={"display": "inline-block"},
inputClassName="mr-2 ml-2",
)
def make_range_slider(id, slider_list, step=1):
return dcc.RangeSlider(
id=id,
min=slider_list[0],
max=slider_list[-1],
step=step,
marks={int(i): str(i) for i in slider_list},
value=[slider_list[0], slider_list[-1]],
persistence_type="session",
)
controls = dbc.Card(
[
dbc.Row(
[
dbc.Col(
dbc.FormGroup(
[
dbc.Label("Select indicator (y-axis)"),
make_dropdown("indicator", ["gdpPercap", "lifeExp", "pop"]),
]
)
),
dbc.Col(
dbc.FormGroup(
[
dbc.Label("Select continents"),
make_checklist("continents", df.continent.unique()),
]
)
),
]
),
dbc.FormGroup(
[
dbc.Label("Select years"),
make_range_slider("slider_years", df.year.unique(), 5),
]
),
],
className="m-4 px-2",
)
app.layout = dbc.Container(
[
html.H1("Demo App", className="bg-primary text-white",),
html.Hr(),
dbc.Row(
[
dbc.Col(dcc.Graph(id="line_chart"), md=6),
dbc.Col(dcc.Graph(id="scatter_chart"), md=6),
]
),
controls,
html.Hr(),
],
id="layout_container",
fluid=True,
)
@app.callback(
Output("line_chart", "figure"),
Output("scatter_chart", "figure"),
Input("indicator", "value"),
Input("continents", "value"),
Input("slider_years", "value"),
)
def update_charts(indicator, continents, years):
if continents == [] or indicator is None:
return {}, {}
dff = df[df.year.between(years[0], years[1])]
fig = px.line(
dff[dff.continent.isin(continents)],
x="year",
y=indicator,
color="country",
)
dff = df[df.year == years[1]]
fig2 = px.scatter(
dff[dff.continent.isin(continents)],
x="lifeExp",
y=indicator,
color="lifeExp",
hover_data=["country", "year"],
)
return fig, fig2
if __name__ == "__main__":
app.run_server(debug=True)
1 Like
Thanks! I’ll give it a try and let you know 
