Circular connection of slider and text_input

Custom Components
1

Hi all,
I’ve been spending some time with streamlit, and I love it! I’m building an app and hopefully v1 will be out soon so I can showcase it. However, at the moment I’m a bit stuck with a problem and would be grateful if anyone has any suggestions.

I’m not aware if there is a component that is a slider but can also accept manually inputted number, so I am trying to connect slider with text_input.

I’ve placed slider with text_input in the same row, and passing a value (val) from text_input to slider, and this part works:

    manual_inp_val, slider_value = st.sidebar.beta_columns([0.25,0.75])
    with manual_inp_val:
        val = float(st.text_input('Input:', '0.05'))

    with slider_value:
        st.slider('slider', 
                        min_value = -1.00,
                        value = val,
                        max_value = 5.10,
                        step = 0.10)

How it works:
A value is places, slider updates, and items on dashboard update. Now, lets say I move the slider to a new value – however the text_input written value stays the same as previously input, doesn’t update, and I am aiming for them both to update themselves is one is changed. Otherwise it’s just confusing having these two features with different numbers… Does anyone know if such a thing is possible? Or any other suggestion that will have this functionality.

Additional note:
Why this widget? As user can update values with a slider and seeing an update on the dashboard, I do that in increments of lets say 0.5, however, maybe user will want to have a value which is 0.52 and in that case, user can enter wanted value.

1 Like
2

Update:
While I am still wondering about the issue, for now I managed to go around it.
Realising that the above widget may be ‘Advanced’… For now I will use slider as a ‘Basic option’ for users, and place text_input in Advanced widget options.

3

I am also looking for user convenience. Have you had any new solutions to let them update each other?

4

Hi @rdzudzar and @qhi ,

If I understood correctly , I guess this is something you guys are looking for,

import streamlit as st

"st.session_state object:" , st.session_state

def update_slider():
    st.session_state.slider = st.session_state.numeric
def update_numin():
    st.session_state.numeric = st.session_state.slider            

val = st.number_input('Input', value = 0, key = 'numeric', on_change = update_slider)


slider_value = st.slider('slider', min_value = 0, 
                        value = val, 
                        max_value = 5,
                        step = 1,
                        key = 'slider', on_change= update_numin)

streamlit-test-2022-02-07-15-02-31

Basically the on_change callback doing the job. Does this help ?

For further understanding, refer to this amazing video by @Marisa_Smith Session State basics - YouTube

Best
Avra

2 Likes
5

Hi both,

As I mentioned previously, I went around this solution and created basic/advanced options for my App.

@AvratanuBiswas It seems like your solution was something that I was looking around for, so I marked your answer as solution, hopefully I will try it out at some point, thanks :slight_smile:

Rob

1 Like