# Deslizador

> Elige un número de un rango arrastrando. Un componente nativo de Pyzed para GUIs de escritorio en Python, con vista previa, ejemplos y su API.

Source: https://albakore.github.io/pyzed/es/library/slider/

:::tip[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](https://albakore.github.io/pyzed/es/library/#formularios) · [Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#slider)

**Código:**

```python
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](https://albakore.github.io/pyzed/es/library/number-field/).

## Uso

```python
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

:::note[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

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

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

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

### Rango y paso

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

```python
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.

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

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

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

```python
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.

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

```python
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](https://albakore.github.io/pyzed/es/guides/events/) y [Eventos de cada componente](https://albakore.github.io/pyzed/es/library/events/).

| 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](https://albakore.github.io/pyzed/es/guides/code-styles/).

**Imperativo:**

```python
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:**

```python
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:**

```python
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

:::tip
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`

```python
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](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/ui/#slider)

### `pz.slider`

```python
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](#eventos)).

[Referencia completa →](https://albakore.github.io/pyzed/es/reference/widgets/#slider)

### `pz.vertical_slider`

```python
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 →](https://albakore.github.io/pyzed/es/reference/widgets/#vertical_slider)

## Relacionados

- [Campo numérico](https://albakore.github.io/pyzed/es/library/number-field/): Un número con botones −/+, límites, paso y sufijo.
- [Progreso](https://albakore.github.io/pyzed/es/library/progress/): Una barra de progreso fina en un color semántico.