Updating a Date Time Range Slider Through A Callback With Another Slider

Dash Python
1

Hey!

I have been trying to update a second slider which uses date time values through a callback with my first slider as well as multiple dropdowns. This is my current code:

@app.callback(dash.dependencies.Output('rangeslider','value'),
    [dash.dependencies.Input('country','value'),
    dash.dependencies.Input('Equipment_Sub_Category','value'),
    dash.dependencies.Input('Time','value'),
    dash.dependencies.Input('Currency','value'),
    dash.dependencies.Input('my-range-slider','value'),
    dash.dependencies.Input('brand','value')
    ])

def update_slider(country_name,category_name,time_name,currency_name,year_name,brand_name):
        Total1=Total[Total['Country_Name'] == country_name]
        Total2=Total1[Total1['Equipment_Category'] ==category_name]
        year_range=list(range(year_name[0],year_name[1]+1, 1))
        print(year_range)
        Total3=Total2[Total2.Annual.isin(year_range)]
        Total4=Total3[Total3['Currency'] ==currency_name]
        Total5=Total4[Total4['Manufacturer_Name'] ==brand_name]

        if time_name =='Half':
                 rangeslidervalue=html.Div([dcc.RangeSlider(
                    id='my-range-slider',
                    min=min(Total5['Half'].unique()),
                    max=max(Total5['Half'].unique()),
                    marks={i: i for i in Total5['Half'].unique()},
                    value=['2017-06-30','2018-06-30']
                    )],style={'width':'96%','padding-left':'3%','padding-right':'1%'})

        elif time_name =='Quarters':
                 rangeslidervalue=html.Div([dcc.RangeSlider(
                    id='my-range-slider',
                    min=min(Total5['Quarters'].unique()),
                    max=max(Total5['Quarters'].unique()),
                    marks={i: i for i in Total5['Quarters'].unique()}
                    )],style={'width':'96%','padding-left':'3%','padding-right':'1%'})
        else:
             None
             return rangeslidervalue

Essentially, the idea is to filter the data frame using dropdowns and then to use my first slider (which is composed of years 2010-2019) to create my slider values for my second slider. The second slider is essentially date time values signifying quarter points or half year points of the year range selected in the first slider.

However I am getting two problems. The first problem is that every time I try to execute this code, I keep getting the following type error:

File "Debug", line 263, in update_slider
year_range=list(range(year_name[0],year_name[1]+1, 1))
TypeError: range() missing 1 required positional argument: 'year_name'

The interesting thing is that when I execute this exact function to update a graph instead of another slider, it completely works so I am not sure why it is not working now.

The other problem is that I have read previous posts on this forum about how a range slider does not naturally take date time values and that you have to use a function for it to take. Since I am already creating a callback (and therefore using a function) to update my second range slider, is there an easier way for this to work?

Sample part of the data frame is seen here:

26 AM
26 AM1163×105 22.8 KB

2

Your first problem is assoc. with Dash firing each callback on page load, and you prob don’t have a default value for your range slider. The best approach is to add some error checking at the top of your callback to ensure the callback was triggered after page load.

Add this to the top of your callbak

ctx = dash.callback_context

# Determine which component triggered callback
triggered = ctx.triggered[0]['prop_id'].split('.')[0]

Look into the ctx structure and notice how you can also check to ensure Inputs, States are populated…this could be helpful for other error handling