CSS Coding for Slider Bar

🎈 Using Streamlit
,
1

I’m looking for help coding the design of a slider bar. Normally the end of the slider bar looks like this:
s0
When the option at the end of the slider is selected, it looks like this:
s1
On a mobile screen the label gets cut off like this:
s2
Instead of having the word run off the screen, I would prefer this:
s3
Does anyone know how to make this happen in streamlit? I should note that I only want the display:none for the left and right ends of the slider. The middle values should still show (if there are more than two values on the slider)

2

Hi @ryanlampkin,

You can definitely make adjustments to the CSS via a “hack” by embedding CSS code (and also HTML codes) and unsafe_allow_html=True as input argument to the st.markdown() function. There’s a lively discussion about this here [1].

I’ve also used this approach to add a top navigation bar to Streamlit apps as shown in this video [2] this repo [3].

For your particular use case, I would recommend to inspect the names of the CSS elements in Google Chrome using View > Developer > Inspect Elements to figure out which elements needs to be altered.

Links:

  1. Are you using HTML in Markdown? Tell us why!
  2. Is it Possible to Add a Navigation Bar to Streamlit Apps? | Streamlit #29 - YouTube
  3. GitHub - dataprofessor/streamlit_navbar

Hope this helps :smile:

1 Like
3

Saw this video. This is a really good component (?) for streamlit, by the way.

1 Like
4

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