ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Formulare

Slider

rx.slider

Offizielle Doku

Werkstattauftrag

Bitte setz einen Preisfilter über die Produktliste. Mit zwei Reglern wählt man Mindest- und Höchstpreis, und der gewählte Bereich soll sofort sichtbar sein.

rx.slider ist ein Balken, auf dem man durch Ziehen eines Reglers eine Zahl innerhalb eines Bereichs wählt. Du nimmst ihn für Zahlen, bei denen die ungefähre Position wichtiger ist als der exakte Wert, wie Lautstärke, Helligkeit oder Preisspannen. Mit einem Wert gibt es einen Regler, mit einer Liste aus zwei Werten einen Bereichsslider.

rx.slider(default_value=40)

Props ausprobieren

Ändere max und step und zieh dann am Regler: Er springt in step-Schritten.

Props ausprobieren

max

100

step

size

variant

color

radius

high_contrast

disabled

rx.slider(default_value=40, max=100, step=1, size="2", variant="surface", color_scheme="indigo", radius="full", high_contrast=False, disabled=False)

Standardmäßig ist min 0, max 100 und step 1. radius nimmt nur none · small · full.

Prop	Werte	Standard	Verwendung
`default_value`	Zahl / Liste von Zahlen	`[50]`	Anfangswert (ungesteuert). Zwei Werte ergeben einen Bereichsslider
`value`	Liste von Zahlen / Var	keiner	Gesteuerter Wert. Auch bei einem Regler eine Liste `[Wert]`
`min`, `max`, `step`	Zahl	`0`, `100`, `1`	Bereich und Schrittweite
`orientation`	`"horizontal"` `"vertical"`	`"horizontal"`	Ausrichtung
`size`	`"1"` bis `"3"`	`"2"`	Stärke
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aussehen
`color_scheme`, `radius`, `high_contrast`		Theme-Wert	Farbe, Ecken (`"none"` `"small"` `"full"`), Kontrast
`width`	CSS-Länge	`"100%"`	Breite
`name`, `disabled`			Name beim Absenden, Sperren
`on_change`	Event		Fortlaufend während des Ziehens. Übergibt die Werteliste
`on_value_commit`	Event		Einmal beim Loslassen. Übergibt die Werteliste

Einmal beim Loslassen: on_value_commit

on_value_commit wird in dem Moment einmal aufgerufen, in dem du den Regler loslässt. Der Wert kommt auch bei nur einem Regler als Liste wie [50], also holst du ihn mit value[0] heraus. Während des Ziehens wird der Server nicht aufgerufen, das hält es leicht.

50

class SliderCommitState(rx.State):
    value: int = 50

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value = int(value[0])


rx.vstack(
    rx.heading(SliderCommitState.value, size="5"),
    rx.slider(default_value=50, on_value_commit=SliderCommitState.set_end),
    width="100%",
)

Bereichsslider

Gibst du default_value eine Liste mit zwei Werten, gibt es zwei Regler. Beide Werte müssen zwischen min und max liegen. Der Handler bekommt [Anfang, Ende].

Das Beispiel der offiziellen Doku schreibt min_=0, in 0.10 wird min_ aber als CSS-Stil weitergereicht und nicht zum Minimum des Sliders. Das Minimum setzt du mit min=0.

25

75

class SliderRangeState(rx.State):
    value_start: int = 25
    value_end: int = 75

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value_start = int(value[0])
        self.value_end = int(value[1])


rx.vstack(
    rx.hstack(
        rx.heading(SliderRangeState.value_start, size="5"),
        rx.heading(SliderRangeState.value_end, size="5"),
    ),
    rx.slider(
        default_value=[25, 75],
        min=0,
        max=100,
        size="1",
        on_value_commit=SliderRangeState.set_end,
    ),
    width="100%",
)

Fortlaufend beim Ziehen: on_change + throttle

on_change wird aufgerufen, solange sich der Regler bewegt. Unverändert wären das zu viele Events, daher sorgt .throttle(100) dafür, dass höchstens alle 100 ms eines gesendet wird.

50

class SliderLiveState(rx.State):
    value: int = 50

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value = int(value[0])


rx.vstack(
    rx.heading(SliderLiveState.value, size="5"),
    rx.slider(
        default_value=50,
        min=0,
        max=100,
        on_change=SliderLiveState.set_end.throttle(100),
    ),
    width="100%",
)

Gesteuerter Slider: value

Gibst du value einen State-Wert in einer Liste ([State.volume]), zeigt der Regler immer diesen Wert. Dann musst du den State über on_change ändern, damit sich der Regler bewegt. Ändert ein Button den State, wandert auch der Regler.

class SliderControlState(rx.State):
    volume: int = 30

    @rx.event
    def set_volume(self, value: list[int | float]):
        self.volume = int(value[0])

    @rx.event
    def mute(self):
        self.volume = 0


rx.hstack(
    rx.icon("volume-2", size=18),
    rx.slider(
        value=[SliderControlState.volume],
        on_change=SliderControlState.set_volume.throttle(100),
        max=100,
        step=5,
        flex="1",
    ),
    rx.text(SliderControlState.volume, size="2", min_width="2em"),
    rx.button("Mute", on_click=SliderControlState.mute, size="1", variant="soft"),
    width="100%",
    align="center",
)

Vertikaler Slider und Schritte

Mit orientation="vertical" steht er senkrecht. Ein vertikaler Slider braucht ein Elternelement mit Höhe, um sichtbar zu sein, und mit width="auto" statt der Standardbreite "100%" belegt er nur so viel Platz wie der Balken breit ist. Der dritte Slider hat step=2 und hält nur bei 0, 2, 4 … 10.

rx.hstack(
    rx.slider(default_value=30, orientation="vertical", width="auto"),
    rx.slider(default_value=[20, 60], orientation="vertical", width="auto", color_scheme="green"),
    rx.slider(default_value=4, min=0, max=10, step=2, orientation="vertical", width="auto", color_scheme="orange"),
    height="140px",
    spacing="6",
)

Im Formular

Mit name landet der Wert als Name: Wert in den Formulardaten. Er kommt als String ("40") an, für Zahlen wandelst du ihn mit int() um. Ein Slider mit zwei Reglern sendet seinen Wert zweimal unter dem Namen name[], die Formulardaten in 0.10 sind aber ein dict, sodass bei gleichem Namen nur der letzte Wert übrig bleibt. Bereiche holst du dir sicherer über den State.

Results:

{}

class SliderFormState(rx.State):
    form_data: dict = {}

    @rx.event
    def handle_submit(self, form_data: dict):
        self.form_data = form_data


rx.card(
    rx.vstack(
        rx.form.root(
            rx.hstack(
                rx.slider(default_value=40, name="slider"),
                rx.button("Submit", type="submit"),
                width="100%",
                align="center",
            ),
            on_submit=SliderFormState.handle_submit,
            reset_on_submit=True,
            width="100%",
        ),
        rx.divider(),
        rx.hstack(rx.text("Results:", weight="bold"), rx.badge(SliderFormState.form_data.to_string())),
        width="100%",
    ),
    width="100%",
    max_width="420px",
)

Auftrag erledigt

Die zwei Regler werden über value=[low, high] gesteuert, und on_change ist auf 100 ms gedrosselt, damit die Bereichsanzeige beim Ziehen mitläuft. Wegen step=10 springt der Preis in Zehnerschritten.

Price

$20 - $80

$200

class SliderPriceState(rx.State):
    low: int = 20
    high: int = 80

    @rx.event
    def set_price(self, value: list[int | float]):
        self.low, self.high = int(value[0]), int(value[1])


rx.card(
    rx.vstack(
        rx.hstack(
            rx.text("Price", weight="bold"),
            rx.spacer(),
            rx.badge("$", SliderPriceState.low, " - $", SliderPriceState.high, variant="soft"),
            width="100%",
        ),
        rx.slider(
            value=[SliderPriceState.low, SliderPriceState.high],
            on_change=SliderPriceState.set_price.throttle(100),
            min=0,
            max=200,
            step=10,
        ),
        rx.hstack(rx.text("$0", size="1"), rx.spacer(), rx.text("$200", size="1"), width="100%", color_scheme="gray"),
        width="100%",
    ),
    width="100%",
    max_width="360px",
)

Werkstattnotizen

rx.slider(default_value=40). Eine Liste mit zwei Werten ergibt einen Bereichsslider.
Handler bekommen immer eine Werteliste. Bei einem Regler value[0].
Einmal beim Loslassen: on_value_commit; beim Ziehen: on_change + .throttle(100).
Gesteuert mit value=[State.x] + on_change. Minimum mit min= (nicht min_).
Im Formular kommt der Wert als String wie name: "40" an.

← Zurück

Formulare · Select

Weiter →

Formulare · Form

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex