I have got three components which enable date picking. One is a slider and two remaining are date inputs. The code for them is as follows:

sub_col_2_1, sub_col_2_2 = col2.columns(2)
st.session_state.btn_from = sub_col_2_1.date_input(
    "From",
    value=st.session_state.age_from,
    on_change=update_age_range,
    args=("btn",),
)
st.session_state.btn_to = sub_col_2_2.date_input(
    "To",
    value=st.session_state.age_to,
    on_change=update_age_range,
    args=("btn",),
)

st.session_state.slider_range = col2.slider(
    "Date of birth",
    max_value=max_date,
    min_value=min_date,
    value=(
        st.session_state.age_from,
        st.session_state.age_to,
    ),
    format="DD-MM-YYYY",
    on_change=update_age_range,
    args=("slider",),
)

They invoke a callback function called update_age_range which should update the state based on what component triggered it.

def update_age_range(source):
    if source == "slider":
        st.session_state.age_from = st.session_state.slider_range[0]
        st.session_state.age_to = st.session_state.slider_range[1]
    elif source == "btn":
        st.session_state.age_from = st.session_state.btn_from
        st.session_state.age_to = st.session_state.btn_to

The behaviour now is that the state updates with a “delay” of one interaction. I want them to update instantly and rerender with correct values.