pythoncsspy-shiny

How to modify the color of an input_slider?


I am trying to build a Shiny for Python app that implements an interactive histogram plot using matplotlib and a slider. How do I get to change the default slider colour blue to some other colour, say green, and also, is there a way to colour the value of the slider differently than the default white colour?

So, for example, in the screenshot below, what I am aiming to do is to change the default blue slider colour (as indicated by the red arrow) to green, and the text or value shown in white colour (as indicated by the purple arrow) to black colour.

screenshot from my current app's slider

The script I currently have is given below:

import matplotlib.pyplot as plt
import numpy as np

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

app_ui = ui.page_fluid(
    ui.input_slider("obs", "Number of bins:", min=10, max=100, value=30),
    ui.output_plot("distPlot"),
)


def server(input: Inputs, output: Outputs, session: Session):
    @render.plot
    def distPlot():
        np.random.seed(42)
        x = 100 + 15 * np.random.randn(437)

        fig, ax = plt.subplots()
        ax.hist(x, input.obs(), density=True)
        return fig


app = App(app_ui, server)

Solution

  • You can add custom css like this:

    from shiny import App, Inputs, Outputs, Session, ui
    
    app_ui = ui.page_fluid(
        ui.input_slider("obs", "Number of bins:", min=10, max=100, value=30),
        ui.tags.style("""
            .irs.irs--shiny .irs-single { /* square with number */
                background-color: #90EE90;
                color: black
            }
            .irs-bar.irs-bar--single { /* line */
                background-color: #90EE90;
            }
            .irs-handle.single { /* circle */
                background-color: #90EE90;
            }
            """
        )
    )
    
    def server(input: Inputs, output: Outputs, session: Session):
        pass
    
    app = App(app_ui, server)
    

    enter image description here