ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Formularios

Slider

rx.slider

Documentación oficial

Pedido del taller

Añade a la lista de productos un filtro de rango de precios. Con dos tiradores se eligen el precio mínimo y el máximo, y el rango elegido debe verse al instante.

rx.slider es una barra en la que se arrastra un tirador para elegir un número dentro de un rango. Se usa para números en los que importa más la posición aproximada que el valor exacto, como el volumen, el brillo o un rango de precios. Con un valor tiene un tirador; con una lista de dos, es un slider de rango.

rx.slider(default_value=40)

Prueba las propiedades

Cambia max y step y luego arrastra el tirador: se mueve a saltos del tamaño de step.

Prueba las propiedades

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)

min vale 0 por defecto, max 100 y step 1. radius solo acepta none · small · full.

Propiedad	Valores	Por defecto	Uso
`default_value`	Número / lista de números	`[50]`	Valor inicial (no controlado). Con dos, slider de rango
`value`	Lista de números / Var	Ninguno	Valor controlado. Aunque haya un solo tirador, es la lista `[valor]`
`min`, `max`, `step`	Número	`0`, `100`, `1`	Rango e intervalo
`orientation`	`"horizontal"` `"vertical"`	`"horizontal"`	Orientación
`size`	`"1"` ~ `"3"`	`"2"`	Grosor
`variant`	`"classic"` `"surface"` `"soft"`	`"surface"`	Aspecto
`color_scheme`, `radius`, `high_contrast`		Valor del tema	Color, esquinas (`"none"` `"small"` `"full"`), contraste
`width`	Longitud CSS	`"100%"`	Ancho
`name`, `disabled`			Nombre para el envío, bloquear
`on_change`	Evento		Continuamente mientras se arrastra. Pasa la lista de valores
`on_value_commit`	Evento		Una vez al soltar el tirador. Pasa la lista de valores

Una vez al soltar: on_value_commit

on_value_commit se llama una sola vez, en el momento de soltar el tirador. El valor llega como lista, como [50], aunque haya un solo tirador, así que se saca con value[0]. Es ligero porque no llama al servidor mientras arrastras.

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%",
)

Slider de rango

Si pasas a default_value una lista de dos valores, aparecen dos tiradores. Ambos deben estar entre min y max. El handler recibe [inicio, fin].

El ejemplo de la documentación oficial escribe min_=0, pero en 0.10 min_ se pasa como estilo CSS y no se convierte en el mínimo del slider. El mínimo se escribe 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%",
)

Continuamente mientras arrastras: on_change + throttle

on_change se llama sin parar mientras el tirador se mueve. Si lo dejas así se envían demasiados eventos, así que con .throttle(100) se limita a uno cada 100 ms.

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%",
)

Slider controlado: value

Si pasas a value un valor del State envuelto en una lista ([State.volume]), el tirador muestra siempre ese valor. En ese caso hay que actualizar el State con on_change para que el tirador se mueva. Si un botón cambia el State, el tirador también se desplaza.

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",
)

Slider vertical e intervalos

Con orientation="vertical" se pone en vertical. Un slider vertical necesita que el padre tenga altura para verse, y si pones width="auto" en lugar del ancho por defecto "100%", solo ocupa el grosor de la barra. El tercer slider lleva step=2, así que solo se detiene en 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",
)

En un formulario

Si tiene name, entra en los datos del formulario como nombre: valor. El valor llega como cadena ("40"), así que para usarlo como número conviértelo con int(). Un slider con dos tiradores envía su valor dos veces con el nombre name[], pero en 0.10 los datos del formulario son un dict y, con el mismo nombre, solo queda el último valor. Para un rango es más seguro recibirlo por el 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",
)

Completar el pedido

Los dos tiradores se controlan con value=[low, high], y on_change se limita a 100 ms para que el rango mostrado siga al arrastre. Con step=10, los precios van de 10 en 10.

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",
)

Notas del taller

rx.slider(default_value=40). Con una lista de dos, slider de rango.
El handler siempre recibe una lista de valores. Con uno solo, value[0].
Una vez al soltar: on_value_commit; mientras se arrastra: on_change + .throttle(100).
Para controlarlo, value=[State.x] + on_change. El mínimo es min= (no min_).
En un formulario llega como cadena, por ejemplo name: "40".

← Anterior

Formularios · Select

Formularios · Form

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

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

Built with Reflex