Customizing slider aesthetic, adding png to slider

Hello and thanks streamlit team, I’m a big fan!

I am trying to customize a streamlit widget, the slider. For example, we have this scenario.

   cat_response = st.slider('Cat', 0, 100, 50)
    dog_response = st.slider('Dog', 0, 100, 50)
    tiger_response = st.slider('Tiger', 0, 100, 50)

image

I would like to do something similar to GitHub - changey/ECSlider: A simple custom JavaScript slider
that would render an end result that looked something like this:
image

Do you have any solutions or ideas of how to incorporate this solution with the streamlit framework??? (I’ve looked at Streamlit bridges Python and React :: Streamlit Components Tutorial and some of the streamlit source code, but unsure).

2 Likes