How to change st.sidebar.slider default color?

🎈 Using Streamlit
1

Hi, I tried to change the st.sidebar.slider default pink color to others with the below codes but getting error. Can anyone help me out in this…

Code for default pink color:
st.sidebar.slider('ABC',0,20,10)

Tried with below code to change the color:
st.sidebar.slider.markdown(f'<div style="font-size: medium;text-align: left;color: Blue;">'ABC',0,20,10</div>',unsafe_allow_html=True)

OR

st.sidebar.slider.markdown("<h1 style='text-align: left; color: Blue;'>'ABC',0,20,10</h1>", unsafe_allow_html=True)

2

I’m not sure you’re able to change the color of that element at this type, as it appears that it is dynamically created:

.st-by {
    background: linear-gradient(to right, rgb(246, 51, 102) 0%, rgb(246, 51, 102) 75%, rgb(213, 218, 229) 75%, rgb(213, 218, 229) 100%);
}

If you open the developer panel of your browser and move the slider, you’ll notice that the percentage values change to indicate where on the slider you are. I’m not sure you can override that color scheme itself without changing the underlying slider code.

3

Thank you for your reply! But it won’t resolve.

4

Correct, as I mentioned I expect that this cannot work, because the CSS is being dynamically generated by the slider.

1 Like
5

Hey! I think I just found a solution!


NB = st.sidebar.select_slider('', options = [1,10,20,30,40,50,60,70,80,90,100], value = 1)


ColorMinMax = st.markdown(''' <style> div.stSlider > div[data-baseweb = "slider"] > div[data-testid="stTickBar"] > div {
    background: rgb(1 1 1 / 0%); } </style>''', unsafe_allow_html = True)


Slider_Cursor = st.markdown(''' <style> div.stSlider > div[data-baseweb="slider"] > div > div > div[role="slider"]{
    background-color: rgb(14, 38, 74); box-shadow: rgb(14 38 74 / 20%) 0px 0px 0px 0.2rem;} </style>''', unsafe_allow_html = True)

    
Slider_Number = st.markdown(''' <style> div.stSlider > div[data-baseweb="slider"] > div > div > div > div
                                { color: rgb(14, 38, 74); } </style>''', unsafe_allow_html = True)
    

col = f''' <style> div.stSlider > div[data-baseweb = "slider"] > div > div {{
    background: linear-gradient(to right, rgb(1, 183, 158) 0%, 
                                rgb(1, 183, 158) {NB}%, 
                                rgba(151, 166, 195, 0.25) {NB}%, 
                                rgba(151, 166, 195, 0.25) 100%); }} </style>'''

ColorSlider = st.markdown(col, unsafe_allow_html = True)

image

image

1 Like