RangeInput

A dual-handle slider for selecting a range with minimum and maximum values.

Price: $200

$700

Basic Usage

from pywry import RangeInput

price_range = RangeInput(
    label="Price",
    event="filter:price",
    min=0,
    max=1000,
    start=100,   # Left handle
    end=500,     # Right handle
)

With Step

RangeInput(
    label="Year Range",
    event="filter:years",
    min=1990,
    max=2026,
    start=2000,
    end=2026,
    step=1,
)

Common Patterns

Data Filtering

from pywry import PyWry, Toolbar, RangeInput, Div

app = PyWry()

def on_range_filter(data, event_type, label):
    start = data["start"]
    end = data["end"]
    # Update display with selected range
    app.emit("pywry:set-content", {
        "selector": "#filter-info",
        "html": f"Filtering values between {start} and {end}"
    }, label)

app.show(
    "<h1>Data Filter</h1><div id='filter-info'>Select a range</div>",
    toolbars=[
        Toolbar(position="top", items=[
            RangeInput(
                label="Value Range",
                event="data:range",
                min=0,
                max=100,
                start=25,
                end=75,
            )
        ])
    ],
    callbacks={"data:range": on_range_filter},
)

Time Window

RangeInput(
    label="Time (hours)",
    event="filter:time",
    min=0,
    max=24,
    start=9,    # 9 AM
    end=17,     # 5 PM
    step=1,
)

With Display Labels

from pywry import PyWry, Toolbar, RangeInput, Div

app = PyWry()

def format_range(data, event_type, label):
    app.emit("pywry:set-content", {
        "selector": "#range-display",
        "html": f"${data['start']:,} - ${data['end']:,}"
    }, label)

app.show(
    "<h1>Budget Selector</h1>",
    toolbars=[
        Toolbar(position="top", items=[
            RangeInput(
                label="Budget",
                event="filter:budget",
                min=0,
                max=10000,
                start=1000,
                end=5000,
                step=100,
            ),
            Div(component_id="range-display", content="$1,000 - $5,000"),
        ])
    ],
    callbacks={"filter:budget": format_range},
)

Attributes

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

Events

Emits the event name with payload:

{"start": 100, "end": 500, "componentId": "range-abc123"}

• start — current value of the left handle
• end — current value of the right handle

API Reference

Bases: ToolbarItem

A dual-handle range slider for selecting a value range.

Emits {start: ..., end: ..., componentId: ...} on range change.

This component provides a single slider track with two handles for selecting a minimum and maximum value. Unlike SliderInput which selects a single value, RangeInput allows users to define a range of values.

Attributes:

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

Examples:

>>> RangeInput(
...     label="Price Range:",
...     event="filter:price",
...     start=100,
...     end=500,
...     min=0,
...     max=1000,
...     step=10,
... )

Functions

validate_range

validate_range() -> RangeInput

Validate min <= max and start <= end within range.

build_html

build_html() -> str

Build dual-handle range slider HTML with overlaid inputs.

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.