How to hide the static label of a slider? How to center the filter labels? How to center the selectbox options?

[pedroalexleite]

Hi! I’m new to Streamlit, and I’m doing my first website using this package. I have a few basic questions regarding, formatting the filters: slider, text_input and selectbox.

1. How do I hide the static label of slider? Like this:
   
   

Here’s the code:

min_rating, max_rating = st.sidebar.slider('Rating', min_value=players['Rating'].min(), max_value=players['Rating'].max(), value=(default_min_rating, default_max_rating) if not reset_button else (players['Rating'].min(), players['Rating'].max()), key="key_rating")

2. How do I center the filter labels (slider, text_input and selectbox)?
   

   

3. How do I center the selectbox options?

Here’s the code:

countries = sorted(players['Country'].unique())
if 'All' not in countries:
  countries.insert(0, 'All')
selected_country = st.sidebar.selectbox('Country', options=countries, index=countries.index(default_selected_country) if not reset_button else 0, key="key_country")

And here’s the FULL code and Dataset:

GitHub - pedroalexleite/StreamLitFirstWebsite

Thanks in advance!

[mathcatsand]

I’ve simplified your example so that the snippet is executable for everyone. The CSS applies to all sliders in your app. You can add scoping to make it apply only to sliders in your sidebar if you want.

import streamlit as st

min_rating, max_rating = st.sidebar.slider(
    "Rating",
    min_value=50,
    max_value=100,
    value = (50,100),
    key="key_rating"
)

css = """
<style>
    .stSlider [data-testid="stTickBar"] {
        display: none;
    }
    .stSlider label {
        display: block;
        text-align: center;
    }
</style>
"""

st.markdown(css, unsafe_allow_html=True)

[mathcatsand]

Here’s the extra bit for st.selectbox, but I generally recommend against centering like this. As you’ll note with a selectbox, the extra UI element (the down arrow) messes with the concept of “center.” That adds extra tweaks to make the label and the internals both look the same. This in turn makes it more fragile and likely to appear slightly off. The left justification that is standard with Streamlit apps is protective against misalignment given the various screens and resolutions that people have.

import streamlit as st

countries = ["Alpha", "Beta", "Gamma", "Delta"]
if 'All' not in countries:
  countries.insert(0, 'All')
selected_country = st.sidebar.selectbox('Country', options=countries, key="key_country")

css = """
<style>
    .stSelectbox [data-baseweb="select"] > div > div > div:first-child {
        display: block;
        width: 100%;
        text-align: center;
        padding-left: 32px;
    }
    [data-testid="stVirtualDropdown"] li {
        text-align: center;
    }
    .stSelectbox label {
        display: block;
        text-align: center;
    }
</style>
"""

st.markdown(css, unsafe_allow_html=True)

[pedroalexleite]

Thank you, so much! Exactly what i was looking for!