Customize color for multiple st.sidebar.slider

Using Streamlit
1

Hi everyone, I am trying to customize individual colors for individual sliders, but it kept giving me the same color for all sliders. I used ChatGPT to ask it resolve this issue, and all it suggested was adding !important; or div.stSlider:nth-of-type(1), neither of which worked. Can anyone help me with this issue? I am running streamlit (1.41.1 version) locally from Python

The following is a sample code that ChatGPT suggested, which did not work as it still gives both sliders the same RED color.

import streamlit as st

Inject CSS for Slider #1 (nth-of-type(1)) and Slider #2 (nth-of-type(2))

Adjust for more sliders if needed.

css_code = “”"

/* ============================ SLIDER #1 ============================ */ div.stSlider:nth-of-type(1) div[data-baseweb="slider"] > div[data-testid="stTickBar"] { /* Track background color or gradient for Slider #1 */ background: linear-gradient( to right, rgba(255, 0, 0, 0.8) 0%, /* red start */ rgba(255, 0, 0, 0.8) 50%, /* red midpoint */ rgba(200, 200, 200, 0.2) 50%, /* gray remainder */ rgba(200, 200, 200, 0.2) 100% ) !important; } div.stSlider:nth-of-type(1) div[data-baseweb="slider"] > div > div > div[role="slider"] { /* Thumb color and shadow for Slider #1 */ background-color: red !important; box-shadow: 0px 0px 0px 0.2rem rgba(255, 0, 0, 0.2) !important; } /* ============================ SLIDER #2 ============================ */ div.stSlider:nth-of-type(2) div[data-baseweb="slider"] > div[data-testid="stTickBar"] { /* Track background color or gradient for Slider #2 */ background: linear-gradient( to right, rgba(0, 0, 255, 0.8) 0%, /* blue start */ rgba(0, 0, 255, 0.8) 30%, /* blue portion */ rgba(0, 200, 0, 0.4) 30%, /* green remainder */ rgba(0, 200, 0, 0.4) 100% ) !important; } div.stSlider:nth-of-type(2) div[data-baseweb="slider"] > div > div > div[role="slider"] { /* Thumb color and shadow for Slider #2 */ background-color: rgb(0, 200, 0) !important; box-shadow: 0px 0px 0px 0.2rem rgba(0, 200, 0, 0.2) !important; }

“”"

st.markdown(css_code, unsafe_allow_html=True)

— Demo Sliders —

st.write(“## Customize Each Slider Background Differently”)

slider1 = st.slider(“Slider #1”, 0.0, 1.0, 0.25)
slider2 = st.slider(“Slider #2”, 0.0, 1.0, 0.75)

st.write(“Value of Slider #1:”, slider1)
st.write(“Value of Slider #2:”, slider2)

2

try using key property so that you can distinguish both
st.slider(label, min_value=None, max_value=None, value=None, step=None, format=None, **key=None**, help=None, on_change=None, args=None, kwargs=None, *, disabled=False, label_visibility="visible")