Representing editable thresholds

[Claire1]

Hi I want to represent thresholds and allow the user to change these thresholds
eg If number is between

=0 and <=4: Poor
4 and <7: Average
=7 and <= 10: Good
10 : Fantastic

so I want the user to be able to change the thresholds
eg if Average >5 , good is >= 8 and fantastic is >10 then the thresholds would be

=0 and <=5: Poor
5 and <8: Average
=8 and <= 10: Good
10 : Fantastic

I’m thinking using a number line would be good something like this

The closest thing I could find was a double-ended slider, however, the max range is not editable:

How can I make the slider range editable?
Are there better ways to represent these thresholds?

Thank you!

[Faltawer]

Hello,
Something like this will do the work ?

        # Define min and max values
        min_value = 0.0
        max_value = 15.0

        def update_category(value):
            if value < 4:
                return 'Bad'
            elif value < 7:
                return 'Good'
            elif value < 10:
                return 'Excellent'
            else:
                return 'Fantastique'

        def update_threshold():
            st.session_state.threshold_category = update_category(st.session_state.threshold_value)

        # Create the slider
        new_threshold = st.slider(
            f"Adjust threshold (Current: {st.session_state.threshold_category})",
            min_value=min_value,
            max_value=max_value,
            value=st.session_state.threshold_value,
            step=0.1,
            on_change=update_threshold,
            key="threshold_value"
        )

        # Display current threshold
        st.write(f"Current threshold value: {st.session_state.threshold_value}")
        st.write(f"Current category: {st.session_state.threshold_category}")

        # Color-coded category
        category_color = {
            'Bad': 'red',
            'Good': 'yellow',
            'Excellent': 'green',
            'Fantastique': 'grey'
        }

        st.markdown(
            f'<h1 style="color: {category_color[st.session_state.threshold_category]};">'
            f'{st.session_state.threshold_category}</h1>',
            unsafe_allow_html=True
        )

[Claire1]

Hi thanks for the code! I need the values in the update category to be editable for the user so the user can change 4 , 7, 10 to any number they want.

Also I tried using your code and added the initialisation of the session state variables:

# Define min and max values
min_value = 0.0
max_value = 15.0

### the lines I added ###
if ['threshold_category'] not in st.session_state:
    st.session_state['threshold_category'] = 'Excellent'
if ['threshold_value'] not in st.session_state:
    st.session_state['threshold_value'] = 4
#####

def update_threshold():
    st.session_state.threshold_category = update_category(st.session_state.threshold_value)
def update_category(value):
    if value < 4:
        return 'Bad'
    elif value < 7:
        return 'Good'
    elif value < 10:
        return 'Excellent'
    else:
        return 'Fantastique'


# Create the slider
new_threshold = st.slider(
    f"Adjust threshold (Current: {st.session_state.threshold_category})",
    min_value=min_value,
    max_value=max_value,
    value=st.session_state.threshold_value,
    step=0.1,
    on_change=update_threshold,
    key="threshold_value"
)

# Display current threshold
st.write(f"Current threshold value: {st.session_state.threshold_value}")
st.write(f"Current category: {st.session_state.threshold_category}")

# Color-coded category
category_color = {
    'Bad': 'red',
    'Good': 'yellow',
    'Excellent': 'green',
    'Fantastique': 'grey'
}

st.markdown(
    f'<h1 style="color: {category_color[st.session_state.threshold_category]};">'
    f'{st.session_state.threshold_category}</h1>',
    unsafe_allow_html=True
)

But I’m getting this warning and the slider snaps back to 4.0 every time I try to change it:

[Faltawer]

Hi
The problem is the key of the widget is the same as the session_state “threshold_value”, try to change the name of it.

The widget return a value with a key => it will the name of the session_state.
But you already set a session_state with the same name. It will overwrite it. (It take me some times to understand this concept : if you want to understnad fully you can try to create a key for a widget and display the session_state above)

        st.selectbox('select value', key='itstheselectbox', options=[0,4,7]  ) 
        st.write(st.session_state)

=> {"itstheselectbox":0}

        def update_category(value, thresholds):
            if value < thresholds[0]:
                return 'Bad'
            elif value < thresholds[1]:
                return 'Good'
            elif value < thresholds[2]:
                return 'Excellent'
            else:
                return 'Fantastique'

        st.title('Category Updater')

        # User input for thresholds
        threshold1 = st.number_input('Threshold for Bad/Good', value=4, step=1)
        threshold2 = st.number_input('Threshold for Good/Excellent', value=7, step=1)
        threshold3 = st.number_input('Threshold for Excellent/Fantastique', value=10, step=1)

You may need to add some change in the code (here if the bad is >to the fantastique it may lead to some problems)