Vertical Slider Component

Custom Components
21

@Mike_Rightmire I cannot reproduce your issue. Which version of the VerticalSlider are you using?

22

streamlit-vertical-slider==2.5.5
streamlit-toggle==0.1.3

23

Im testing it in isolation. If it has the same issue - Iā€™ll show the code. Thanks again for the help!

24

Thanks, BTW st.toggle is now a native streamlit widget.

25

OK. Its working when itā€™s the only thing on the page. Itā€™s something else in the streamlit code. If I figure it out Iā€™ll let you know :smiley:

26

Glad it works. Let me know if I can help in any other way.

27

OK. Iā€™ve recreated the bug. It has something to do with the containers.

In short, when the code reads asā€¦

if len(column) > 0: 
    column, values_df = get_df(column)
    if values_df.shape[0] > 1: 
        valuesstd = statistics.stdev(values_df[column].to_list()) 
        Q25, median, Q75, IQR = get_quartiles()
        
        limits = [median - (valuesstd * 3), median + (valuesstd * 2)]
        # with chartcontainer:
        fig = px.box(values_df, y=column)
        st.plotly_chart(fig)

ā€¦the sliders work as expected.

However, if the code readsā€¦

column = "peak_retentiontime"
if len(column) > 0: 
    column, values_df = get_df(column)
    if values_df.shape[0] > 1: 
        valuesstd = statistics.stdev(values_df[column].to_list()) 
        Q25, median, Q75, IQR = get_quartiles()
        
        limits = [median - (valuesstd * 3), median + (valuesstd * 2)]
            with chartcontainer:
                fig = px.box(values_df, y=column)
                st.plotly_chart(fig)

ā€¦the slider wonā€™t retain itā€™s value.
Working slider
Broken slider

Full codeā€¦

from lib.custom_css import branding
from math import log10, floor
from plotly.subplots import make_subplots

import math
import numpy as np
import statistics
import streamlit_vertical_slider  as svs
import streamlit as st
import os
import pandas as pd
import pickle
import psycopg2
import plotly.express as px
import plotly.graph_objects as go


@st.cache_data(show_spinner = "Collecting data...", ttl = 300) # ttl in seconds
def _get_df():
    if os.path.isfile("./finding_limits_df.pickle"):#3333
        with open("./finding_limits_df.pickle", "rb") as f:#3333 
            return pickle.load(f)#3333

#@st.cache_data(show_spinner = "Collecting data...", ttl = 300) # ttl in seconds
def get_df(column):
    peaks_df = _get_df()
    
    if column == "peak_retentiontime":
        peaks_df = peaks_df[peaks_df.methodtype == "pmx Method"]
        peaks_df["peak_retentiontime_delta"] = peaks_df["peak_retentiontime"].astype(float) - peaks_df["expected_retention_time"].astype(float)
        column = "peak_retentiontime_delta" 
    
    peaks_df = peaks_df[peaks_df[column].notnull()] 

    return column, peaks_df 


def get_quartiles():
    Q25, median, Q75 = values_df[column].quantile([0.25,0.5,0.75])
    IQR = Q75 - Q25
    return Q25, median, Q75, IQR


st.set_page_config(layout="wide")
branding()
st.header("Test vert slider")
color = "Blue"

with st.sidebar:
    DF_IP     = st.text_input("Server", value = "sidappnewportdp2.lfs.agilent.com")
    DF_PORT   = st.text_input("Port", value = 5433)
    DF_DBNAME = st.text_input("DB", value = "datarepo") 
    DF_USER   = st.text_input("User", value = "postgres")
    DF_PASS   = st.text_input("Password", value = "postgres")

# Setup the page layout first
#===============================================================================
displaycol1, displaycol2, displaycol3 = st.columns(3)
recommendationcontainer = st.container()
filtercol1, filtercol2, filtercol3, filtercol4 = st.columns(4)
controlchartmarkerlines1, controlchartmarkerlines2, controlchartmarkerlines3, controlchartmarkerlines4, = st.columns(4)
chartcontainer = st.container()
subchartcontainer = st.container()
controlchartcontainer_chart, controlchartcontainer_sliders = st.columns([5,1])

# If a column is selected, load the values_df. This is the main DF
column = "peak_retentiontime"
if len(column) > 0: 
    column, values_df = get_df(column)
    if values_df.shape[0] > 1: 
        valuesstd = statistics.stdev(values_df[column].to_list()) 
        Q25, median, Q75, IQR = get_quartiles()
        
        limits = [median - (valuesstd * 3), median + (valuesstd * 2)]
        #=======================================================================
        with chartcontainer:
            fig = px.box(values_df, y=column)
            st.plotly_chart(fig)
        
        st.write("median=", median)
        st.write("valuesstd=", valuesstd )
        st.write(max(values_df[column]))
        with controlchartcontainer_sliders:        
            selected_upper_limit = svs.vertical_slider(
                # key             = "selected_upper_limit_key", 
                default_value   = median, 
                step            = max(values_df[column]) / 100, 
                min_value       = median - (valuesstd * 4), 
                max_value       = median + (valuesstd * 4),
                slider_color= 'green', #optional
                track_color='lightgray', #optional
                thumb_color = 'red' #optional
                )
            st.write(selected_upper_limit)
            
            selected_lower_limit = svs.vertical_slider(
                key             = "selected_lower_limit_key", 
                # default_value   = limits[0], 
                step            = max(values_df[column]) / 100, 
                min_value       = median - (valuesstd * 4), 
                max_value       = median + (valuesstd * 4),
                slider_color= 'green', #optional
                track_color='lightgray', #optional
                thumb_color = 'red' #optional
                )
            st.write(selected_lower_limit)

I also tried putting the

        with chartcontainer:
            fig = px.box(values_df, y=column)
            st.plotly_chart(fig)

ā€¦at the end of the file, but it still didnā€™t work.