SliderInput

A visual slider for selecting numeric values within a range.

Volume: 50

Basic Usage

from pywry import SliderInput

volume = SliderInput(
    label="Volume",
    event="audio:volume",
    value=50,
    min=0,
    max=100,
)

With Step

SliderInput(
    label="Brightness",
    event="display:brightness",
    value=75,
    min=0,
    max=100,
    step=5,  # Snaps to multiples of 5
)

Show Value Display

SliderInput(
    label="Opacity",
    event="style:opacity",
    value=100,
    min=0,
    max=100,
    show_value=True,  # Displays current value next to slider
)

Common Patterns

Real-time Updates

from pywry import PyWry, Toolbar, SliderInput, Div

app = PyWry()

def on_zoom_change(data, event_type, label):
    zoom_level = data["value"]
    app.emit("pywry:set-content", {
        "selector": "#zoom-display",
        "html": f"Zoom: {zoom_level}%"
    }, label)

app.show(
    "<h1>Zoom Demo</h1><div id='zoom-display'>Zoom: 100%</div>",
    toolbars=[
        Toolbar(position="top", items=[
            SliderInput(label="Zoom", event="chart:zoom", value=100, min=50, max=200, step=10)
        ])
    ],
    callbacks={"chart:zoom": on_zoom_change},
)

With Labels

from pywry import PyWry, Toolbar, SliderInput, Div

app = PyWry()

def format_slider_label(data, event_type, label):
    value = data["value"]
    app.emit("pywry:set-content", {
        "selector": "#opacity-label",
        "html": f"{value}%"
    }, label)

app.show(
    "<h1>Opacity Control</h1>",
    toolbars=[
        Toolbar(position="top", items=[
            SliderInput(label="Opacity", event="style:opacity", value=100, min=0, max=100),
            Div(component_id="opacity-label", content="100%"),
        ])
    ],
    callbacks={"style:opacity": format_slider_label},
)

Multiple Sliders

rgb_toolbar = Toolbar(
    position="right",
    items=[
        SliderInput(label="R", event="color:r", value=128, min=0, max=255),
        SliderInput(label="G", event="color:g", value=128, min=0, max=255),
        SliderInput(label="B", event="color:b", value=128, min=0, max=255),
    ],
)

Attributes

component_id : str | None
    Unique identifier for state tracking (auto-generated if not provided)
label : str | None
    Display label shown next to the slider
description : str | None
    Tooltip/hover text for accessibility and user guidance
event : str
    Event name emitted on value change (format: namespace:event-name)
style : str | None
    Optional inline CSS
disabled : bool
    Whether the slider is disabled (default: False)
value : float | int
    Current slider value (default: 50)
min : float | int
    Minimum value (default: 0)
max : float | int
    Maximum value (default: 100)
step : float | int
    Increment step size (default: 1)
show_value : bool
    Display current value next to the slider (default: True)
debounce : int
    Milliseconds to debounce input events (default: 50)

Events

Emits the event name with payload:

{"value": 75, "componentId": "slider-abc123"}

• value — current numeric value of the slider

Slider vs NumberInput

Component	Best For
SliderInput	Visual selection, continuous ranges
NumberInput	Precise values, wide ranges

API Reference

Bases: ToolbarItem

A single-value slider input.

Emits {value: ..., componentId: ...} on slider change.

Attributes:

Name	Type	Description
value	float or int	Initial slider value (default: 50).
min	float or int	Minimum value (default: 0).
max	float or int	Maximum value (default: 100).
step	float or int	Step increment (default: 1).
show_value	bool	Display the current value next to the slider (default: True).
debounce	int	Milliseconds to debounce input events (default: 50).

Examples:

>>> SliderInput(label="Zoom:", event="zoom:level", value=50, min=0, max=100, step=5)

Functions

validate_range

validate_range() -> SliderInput

Validate min <= max and value is within range.

build_html

build_html() -> str

Build range input HTML.

auto_generate_component_id

auto_generate_component_id() -> ToolbarItem

Auto-generate component_id based on type if not provided.

validate_event_name classmethod

validate_event_name(v: str) -> str

Validate event follows namespace:event-name pattern.