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.
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)
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)