Slider values are overlaping

[Niko_Koy]

Hello!

Does anyone know how to change the angle or something else of the slider values, so that the text doesn’t overlap?

[edsaac]

Here is an idea transforming those labels’ css.

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.

10 most common explanations on the Streamlit forum

A guide for Streamlit beginners Hey, community! My name is Debbie Matthews, and I’m a moderator on Streamlit’s wonderful forum. You may have seen me around as mathcatsand, as in “math, cats, and….” If you hang around the forum long enough, you’ll start seeing some common pain points and areas of confusion. I thought it’d be helpful for new users to know where many people trip as they get started with Streamlit. In this post, I’ll talk about 10 of them: Buttons aren’t stateful…

[mathcatsand]

There are a collection of GitHub issues about this too. If anyone comes across this and wants to upvote getting a solution built-in, here’s the designated issue for it (with other, closed issues merged into it as noted in the thread):

datetimes that are close together on silder used for ranges are illegible.