Font size of slider caption

🎈 Using Streamlit
1

Hi, is it possible to change the fontsize and/or color in st.slider() ?

Like below, I want to enlarge the “Pick one case:” caption

image
image2662×238 24.1 KB

2

Hi @zxdawn, see if you can use the logic from here…

Cheers

3

Thanks. Unfortunately, It doesn’t work:

import streamlit as st
import streamlit.components.v1 as components

def ChangeWidgetFontSize(wgt_txt, wch_font_size = '12px'):
    htmlstr = """<script>var elements = window.parent.document.querySelectorAll('*'), i;
                    for (i = 0; i < elements.length; ++i) { if (elements[i].innerText == |wgt_txt|) 
                        { elements[i].style.fontSize='""" + wch_font_size + """';} } </script>  """

    htmlstr = htmlstr.replace('|wgt_txt|', "'" + wgt_txt + "'")
    components.html(f"{htmlstr}", height=0, width=0)

listTabs = [':satellite: Quickview', ':book: About']
tabs = st.tabs(listTabs)
ChangeWidgetFontSize(listTabs[0])

Oh, the css hack works!

    st.markdown(
        """<style>
    div[class*="stSlider"] > label > div[data-testid="stMarkdownContainer"] > p {
        font-size: 20px;
    }
        </style>
        """, unsafe_allow_html=True)
``
4

Hi @zxdawn,

  1. If you use the css hack, it will apply to all the elements of the same type, that exist on the page.
  2. I modified the code slightly, but this won’t work if you use emojis. If you are still interested, the code is below, along with a snapshot:
import streamlit as st
import streamlit.components.v1 as components

def ChangeWidgetFontSize(wgt_txt, wch_font_size = '12px'):
    htmlstr = """<script>var elements = window.parent.document.querySelectorAll('p'), i;
                for (i = 0; i < elements.length; ++i) 
                    { if (elements[i].textContent.includes(|wgt_txt|)) 
                        { elements[i].style.fontSize ='""" + wch_font_size + """'; } }</script>  """

    htmlstr = htmlstr.replace('|wgt_txt|', "'" + wgt_txt + "'")
    components.html(f"{htmlstr}", height=0, width=0)

listTabs = ['Quickview', 'About']
tabs = st.tabs(listTabs)
ChangeWidgetFontSize(listTabs[0], '24px')
ChangeWidgetFontSize(listTabs[1], '9px')

The result looks like:
xyz

Cheers