ui.slider

Slider

Drag, click the track or use the arrow keys — one handle for a value, two for a range, and the live value above the thumb.

Volume

One handle between two icons; the value pops up while you drag.

def volume() -> None:
    with ui.hstack(gap="sm", classes="w-full max-w-sm"):
        ui.icon("volume-1", color="muted")
        ui.slider(value=65, classes="flex-1")
        ui.icon("volume-2", color="muted")

A price range

range=True gives two handles and a [low, high] value. Bound to a ClientState, the label follows without a round trip.

Price per night

def default_price() -> list[int]:
    return [40, 220]


class PriceFilter(ClientState, persist="memory"):
    price: list = field(default_factory=default_price)


def price_range() -> None:
    price = PriceFilter().price
    with ui.card(padding="md", classes="w-full max-w-sm"), ui.vstack(gap="md"):
        with ui.hstack(justify="between"):
            ui.text("Price per night", weight="medium")
            ui.text("€" + price.join(" – €"), color="muted", classes="font-mono")
        ui.slider(value=price, range=True, min=0, max=500, step=10)

Resource limits

min, max and step fit the unit; colour tells the settings apart, and disabled locks one.

CPU (vCPU)

Memory (GB)

Burst budget (%)

Replicas

Fixed on the Starter plan.

def resource_limits() -> None:
    with ui.vstack(gap="lg", classes="w-full max-w-sm"):
        with ui.form_field(label="CPU (vCPU)"):
            ui.slider(value=4, min=1, max=16)
        with ui.form_field(label="Memory (GB)"):
            ui.slider(value=24, min=4, max=64, step=4, color="success")
        with ui.form_field(label="Burst budget (%)"):
            ui.slider(value=30, color="warning")
        with ui.form_field(label="Replicas", hint="Fixed on the Starter plan."):
            ui.slider(value=2, min=1, max=10, disabled=True)

Sizes

def sizes() -> None:
    with ui.vstack(gap="lg", classes="w-full max-w-sm"):
        for level, size in enumerate(("xs", "sm", "md", "lg", "xl")):
            ui.slider(value=20 + level * 15, size=size)

Price a plan

on_change fires when the handle settles: Python recomputes the quote and only that zone is re-rendered.

Team seats

12 seats × €12

€144 / month

class Plan(PageState):
    seats: int = field(default=12)


def change_seats(plan: Plan) -> None:
    """The new seat count is already in ``plan``; the quote re-renders."""


@refreshable(deps=[Plan])
def quote() -> None:
    seats = Plan().seats
    with ui.hstack(justify="between"):
        ui.text(f"{seats} seats × €12", color="muted")
        ui.heading(f"€{seats * 12} / month", level=3, size="lg")


def seat_pricing() -> None:
    with ui.card(padding="md", classes="w-full max-w-sm"), ui.vstack(gap="md"):
        ui.text("Team seats", weight="medium")
        ui.slider(value=Plan().seats, min=1, max=50, on_change=change_seats)
        quote()