Dash Range Slider with date

Maybe this will help:

I used a combination of a DateRangePicker and RangeSlider object where the RangeSlider resembles the amount of unique occurrences in the pandas TimeStamp range, sorted by date. I did not add any values on the RangeSlider object for now but you could show the dates/month by using the index number presented in the RangeSlider to index the Pandas TimeStamp Series.

 dcc.DatePickerRange(
                            id='datepickerrange',
                            start_date=df['Date'].min().date(),
                            end_date=df['Date'].max().date(),
                            min_date_allowed=df['Date'].min().date(),
                            max_date_allowed=df['Date'].max().date(),
                            display_format='D MMM YYYY'
                            ),
              
dcc.RangeSlider(
                            id='rangeslider',
                            min=0,
                            max=df['Date'].nunique()-1,
                            value=[0, df['Date'].nunique()-1],
                            allowCross=False
                            )

@app.callback(Output('datepickerrange', 'start_date'), 
                       [Input('df', 'children'),
                        Input('rangeslider', 'value')])
def update_daterangestart(df, rangeslider_value):
    df= pd.read_json(sorties, orient='split')
    return np.sort(df['Date'].dt.date.unique())[rangeslider_value[0]]

@app.callback(Output('top10-datepickerrange', 'end_date'), 
                       [Input('df', 'children'),
                        Input('top10-rangeslider', 'value')])
def update_daterangeend(df, rangeslider_value):
    df = pd.read_json(sorties, orient='split')
    return np.sort(df['Date'].dt.date.unique())[rangeslider_value[1]]

Here, my DataFrame df is stored as a hidden div: html.Div(id=‘df’, style={‘display’: ‘none’}, children=df.to_json(date_format=‘iso’, orient=‘split’))

I still want to add the function to also update the position of the RangeSlider once the DatePicker is changed but this normally causes a never-ending loop of updates. Therefore I need to add the no update function once the value is the same as it was before: I want to create a conditional callback in dash, is it possible?. But if anyone already managed to do so, please let me know!