pythoncsspy-shiny

How to modify the colors of individual input_slider?

I have sliders in my app and I want to change the colors individually. How can I do this? I'm using custom CSS to hack my way around for checkboxes and radio buttons, but I haven't been able to do this for sliders.

Sliders:

ui.input_slider("red", "red", value=0, min=0, max=50)
ui.input_slider("green", "green", value=0, min=0, max=50)
ui.input_slider("blue", "blue", value=0, min=0, max=50)
Solution

  • You can use Tag.add_class() for adding an individual class on each slider and then use these classes in combination with what was done in this answer:

    enter image description here

    from shiny import App, Inputs, Outputs, Session, ui

app_ui = ui.page_fluid(
    ui.input_slider("red", "red", value=0, min=0, max=50).add_class("redSlider"),
    ui.input_slider("green", "green", value=0, min=0, max=50).add_class("greenSlider"),
    ui.tags.style("""
        .greenSlider > .irs.irs--shiny .irs-single { /* square with number */
            background-color: #90EE90;
            color: black
        }
        .greenSlider > * > .irs-bar.irs-bar--single { /* line */
            background-color: #90EE90;
        }
        .greenSlider > * > .irs-handle.single { /* circle */
            background-color: #90EE90;
        }
        
        .redSlider > .irs.irs--shiny .irs-single { /* square with number */
            background-color: #FF0000;
            color: black
        }
        .redSlider > * > .irs-bar.irs-bar--single { /* line */
            background-color: #FF0000;
        }
        .redSlider > * > .irs-handle.single { /* circle */
            background-color: #FF0000;
        }
        """
    )
)

def server(input: Inputs, output: Outputs, session: Session):
    pass

app = App(app_ui, server)