Deslizador

En pocas palabras

Una barra con un botón que arrastras para elegir una cantidad, como el control del volumen.

Un deslizador con los colores del tema entre min y max (de 0 a 1 por defecto) que avanza de step en step. on_change recibe el nuevo valor mientras arrastras.

ui.slider · Categoría: Formularios · Referencia completa →

Vista previa

Código

pz.column([
    ui.slider(0.35, on_change),
    ui.slider(70, on_change, min=0, max=100, step=1),
], spacing=18, width=360)

Cuándo usarlo

• Para valores en los que importa más la sensación que el número exacto: volumen, opacidad, zoom.
• Cuando haga falta escribir un valor exacto, usa un Campo numérico.

Uso

import pyzed as pz
from pyzed import ui

class Player(pz.App):
    def __init__(self):
        self.volume = 70

    def view(self):
        return pz.row([
            ui.slider(self.volume, lambda v: setattr(self, "volume", v), min=0, max=100, step=1),
            ui.label(f"{self.volume:.0f}%"),
        ], spacing=12, align="center")

Variantes

Sobre estas capturas

Cada captura la graba pyzed mismo, fuera de pantalla a 2x, en One Dark o One Light según el tema de este sitio, y recortada al componente para que se vea a su tamaño real. El puntero pasa por encima, pulsa o escribe en él; un componente que no reacciona al puntero recorre algunos temas. Con movimiento reducido ves el primer fotograma. Abre Código bajo una captura para ver el fragmento que la dibuja; los nombres libres como on_save son tus propios callbacks.

Valor

0.0

Código

ui.slider(0.0, on_change, width=240)

0.35

Código

ui.slider(0.35, on_change, width=240)

1.0

Código

ui.slider(1.0, on_change, width=240)

Rango y paso

min=0, max=100, step=1

Código

ui.slider(70, on_change, min=0, max=100, step=1, width=240)

step=10

Código

pz.column([ui.slider(40, on_change, min=0, max=100, step=10, width=240),
           ui.muted("40 %")], spacing=6, align="center")

Estados y eventos

on_release se ejecuta al terminar de arrastrar: guarda o aplica ahí en lugar de en cada movimiento.

show_value=True

Código

ui.slider(70, on_change, min=0, max=100, step=1, show_value=True, width=240)

show_value="{:.0%}"

Código

ui.slider(0.35, on_change, show_value="{:.0%}", width=240)

vertical=True

Código

ui.slider(6, on_change, min=0, max=10, step=1, vertical=True, height=110, show_value=True)

disabled=True

Código

ui.slider(0.6, on_change, disabled=True, width=240)

Widget base

El widget pz.* de debajo: sin tema, todos los colores y tamaños son tuyos.

pz.slider

Código

pz.slider(0, 100, 60, on_change=on_change, width=240, accent="#e5c07b", knob_color="#ffffff")

pz.vertical_slider

Código

pz.vertical_slider(0, 100, 60, on_change=on_change, height=120, accent="#56b6c2")

Eventos

Deslizador tiene 2 eventos propios, en la tabla de abajo. Como todo widget, también tiene los 18 eventos comunes (click, double_click, right_click, mouse_enter, drag, key_down, resize…), que se conectan con .on(...): mira Eventos y Eventos de cada componente.

Evento	De	El handler recibe	Cuándo
on_change	ui.slider, pz.slider	(value)	Callable que recibe el nuevo valor.
on_release	ui.slider, pz.slider	()	Se envía al terminar de arrastrar (guarda o aplica ahí).

El handler recibe es lo que Pyzed le pasa a tu función: () es nada. Cualquier handler también puede ser un mensaje (un valor que no se puede llamar), que va a update().

Manejar los eventos

Los mismos eventos escritos de tres formas. Imperativa: métodos de la app que cambian self. Declarativa: los handlers producen mensajes y un único update() decide. Funcional: una función pura dibuja un estado inmutable y pide cambios con set_state(...). Mira Imperativo, declarativo y funcional.

Imperativo

class Player(pz.App):
    def __init__(self):
        self.volume = 70
        self.saved = 70

    def view(self):
        return pz.row([
            ui.slider(self.volume, lambda v: setattr(self, "volume", v),   # on_change: while dragging
                      min=0, max=100, step=1,
                      on_release=lambda: setattr(self, "saved", self.volume)),  # on_release: once
            ui.label(f"{self.volume:.0f}% (saved {self.saved:.0f}%)"),
        ], spacing=12, align="center", width=420)

Declarativo

from dataclasses import dataclass


@dataclass
class Volume:
    value: float


class Player(pz.App):
    volume = 70
    saved = 70

    def update(self, message):
        match message:
            case Volume(value):
                self.volume = value
            case "save":
                self.saved = self.volume

    def view(self):
        return ui.slider(self.volume, Volume, min=0, max=100, step=1, on_release="save")

Funcional

from dataclasses import dataclass


@dataclass(frozen=True)
class State:
    volume: float = 70


def view(state, set_state):
    return pz.row([
        ui.slider(state.volume, lambda v: set_state(volume=v), min=0, max=100, step=1),
        ui.label(f"{state.volume:.0f}%"),
    ], spacing=12, align="center", width=420)

Consejos

Consejo

Al pulsarlo o llegar con Tab tiene el foco del teclado: las flechas lo mueven un step, con Shift (o Re Pág/Av Pág) diez, e Inicio/Fin saltan a min/max.

Propiedades y API

ui.slider

slider(
    value,
    on_change=None,
    *,
    min=0.0,
    max=1.0,
    step=0.01,
    on_release=None,
    vertical=False,
    width=None,
    height=None,
    disabled=False,
    show_value=False,
    id=None,
    theme=None,
)

Un deslizador.

Propiedad	Por defecto	Descripción
value	obligatorio	Valor actual.
min	0.0	Mínimo.
max	1.0	Máximo.
step	0.01	Paso.
vertical	False	Lo pone de pie.
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).
disabled	False	Lo atenúa.
show_value	False	Muestra el número al lado: True, o un formato como "{:.0%}".
id	None	Identificador estable para enfocarlo o desplazarlo con un Command.
theme	None	Tema a usar en lugar del actual (pyzed.theme.current()).

Eventos: on_change, on_release (eventos).

Referencia completa →

pz.slider

slider(
    min,
    max,
    value,
    *,
    step=1.0,
    on_change=None,
    on_release=None,
    width=None,
    height=None,
    vertical=False,
    accent=None,
    bg=None,
    knob_color=None,
    border_color=None,
)

Un deslizador entre min y max.

Propiedad	Por defecto	Descripción
min	obligatorio	Mínimo.
max	obligatorio	Máximo.
value	obligatorio	Valor actual.
step	1.0	Paso.
width	None	Ancho: píxeles, "fill", "shrink" o "fill:N" (proporción).
height	None	Alto: píxeles, "fill", "shrink" o "fill:N" (proporción).
vertical	False	Orientación vertical.
accent	None	Color de acento (parte activa).
bg	None	Color de fondo ("#rrggbb[aa]", (r, g, b[, a]) o "transparent").
knob_color	None	Color del tirador.
border_color	None	Color del borde.

Eventos: on_change, on_release (eventos).

Referencia completa →

pz.vertical_slider

vertical_slider(min, max, value, **kwargs)

Un deslizador vertical (slider(..., vertical=True)).

Propiedad	Por defecto	Descripción
min	obligatorio	Mínimo.
max	obligatorio	Máximo.
value	obligatorio	Valor actual.
**kwargs	—	Los de slider.

Referencia completa →

Relacionados

Campo numéricoUn número con botones −/+, límites, paso y sufijo.

ProgresoUna barra de progreso fina en un color semántico.