Slider values are overlaping


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


Here is an idea transforming those labels’ css.

import streamlit as st

        [data-testid="stThumbValue"] {
            transform: rotate(-20deg) translate(50%, 10%);
    """, unsafe_allow_html=True

"# Rotated `stThumbValue`"

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

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


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

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