How to Restyle a Shiny for Python Slider with CSS: Recolor the Track, Handle, and Value Badge

Learn how to restyle a Shiny for Python slider with custom CSS. Change track, handle, and value badge colors to match your theme—no server code changes needed.

How to restyle a Shiny for Python slider: changing the track, handle, and value colors

Interactive Shiny for Python apps often rely on sensible defaults, but sometimes those defaults clash with your palette or accessibility goals. A common case is the slider: by default it ships with a blue track and a white value badge. If you need a green theme and a darker value text, you can override the visuals with a small, targeted CSS tweak without touching the server logic.

Example app that shows the default slider styling

The following app renders a matplotlib-based histogram and exposes the bin count via a slider. It demonstrates the default blue slider and white value badge.

import matplotlib.pyplot as plt
import numpy as np

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

page = ui.page_fluid(
    ui.input_slider("bin_count", "Number of bins:", min=10, max=100, value=30),
    ui.output_plot("hist_view"),
)


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

        fig, axis = plt.subplots()
        axis.hist(values, input.bin_count(), density=True)
        return fig


shiny_app = App(page, backend)

What’s happening and why the color doesn’t change by default

The slider shipped with Shiny for Python comes with predefined CSS rules that color its pieces. There are three parts you typically want to restyle. The small badge showing the current value, the central track line, and the draggable handle. Each of these elements is addressable via stable CSS selectors that can be overridden from the app UI. That means you don’t need to modify Python logic or component constructors. You simply inject custom styles that target these selectors, and the browser applies your theme on top of the defaults.

The fix: inject custom CSS from the UI

To recolor the slider to green and make the value text black, add a style block that targets the appropriate selectors. The square with the number is controlled by .irs.irs--shiny .irs-single, the line is .irs-bar.irs-bar--single, and the handle is .irs-handle.single. Here’s the same app with the CSS override added to the UI. The Python logic is unchanged.

import matplotlib.pyplot as plt
import numpy as np

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

page = ui.page_fluid(
    ui.input_slider("bin_count", "Number of bins:", min=10, max=100, value=30),
    ui.output_plot("hist_view"),
    ui.tags.style("""
        .irs.irs--shiny .irs-single {
            background-color: #90EE90;
            color: black;
        }
        .irs-bar.irs-bar--single {
            background-color: #90EE90;
        }
        .irs-handle.single {
            background-color: #90EE90;
        }
        """
    )
)


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

        fig, axis = plt.subplots()
        axis.hist(values, input.bin_count(), density=True)
        return fig


shiny_app = App(page, backend)

Why this matters for real-world apps

UI consistency is more than aesthetics. When dashboards live alongside brand guidelines or need to satisfy contrast expectations, having control over the slider’s badge, track, and handle colors helps keep the user experience coherent and readable. The approach above avoids any tight coupling to Python code and keeps the styling in one place, which simplifies maintenance.

Takeaways

When you need to customize a Shiny for Python slider, target the visual pieces with CSS selectors and inject the styles via ui.tags.style. The value badge accepts both background and text color changes, while the track and handle can be recolored to match your theme. This keeps your plotting and server code intact and makes future adjustments straightforward.