Slider values are overlaping

Using Streamlit
2

Here is an idea transforming those labels’ css.

image
image780×216 12.8 KB

import streamlit as st

st.markdown("""
    <style>
        [data-testid="stThumbValue"] {
            transform: rotate(-20deg) translate(50%, 10%);
        }
    </style>
    """, unsafe_allow_html=True
)

"# Rotated `stThumbValue`"
"&nbsp;"

value = st.select_slider(
    "select_option", 
    options=range(0, 100, 10),
    value=[30, 40],
    format_func=lambda x: f"YEAR 2020.{x} 🦠",
    label_visibility='collapsed'
)

Also, check bullet #3 from this blog post to learn more about those tweaks.

2 Likes