Traffic light for values

Hey @jgodoy,

First Welcome to the Streamlit Community! :partying_face: :partying_face: :partying_face: :tada: :tada: :tada: :tada: :tada:

I have a solution on how to do this! If you use st.markdown with the unsafe_allow_html=True, then you can pass css code to st.markdown to change text colour! I made an example for you that will change text color based on a slider value of 0-100 (the 0% to 100% in your example).

This code used the color package which you can install in your environment with either pip or conda by using:
pip install colour
conda install -c conda-forge colour

Check out my working example:

import streamlit as st
from colour import Color

st.title("Font Colour based on parameter")

percent = st.slider("Percent value", 0,100)

color_range = list(Color("red").range_to(Color("green"),101))

st.markdown("<font color=%s>THIS TEXT WILL CHANGE COLOR</font>" \
 %color_range[percent], unsafe_allow_html=True)

This gives:
app Β· Streamlit

Happy Streamlit-ing!
Marisa

P.S. if you want to know more I found this helpful Stack exchange link that has lots of references and other β€œtrue” 2 colour gradient options

2 Likes