Slider values are overlaping

Using Streamlit
1

Hello!

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

image

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
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

4

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):