st.slider, st.select_slider, st.checkbox, st.toggle y st.color_picker

st.slider: control deslizante numérico

st.slider genera un control deslizante que permite seleccionar un valor numérico dentro de un rango definido. Es el widget preferido para ajustar hiperparámetros de modelos, establecer umbrales de decisión, filtrar rangos de valores y cualquier escenario donde el usuario necesite seleccionar un número de forma visual e intuitiva.

El tipo de dato devuelto se determina automáticamente según los tipos de min_value y value: si son enteros, devuelve int; si son decimales, devuelve float; si son fechas, devuelve datetime.date:

import streamlit as st
import numpy as np

# Slider entero básico
n_estimadores = st.slider("Número de estimadores", min_value=10, max_value=500, value=100, step=10)

# Slider decimal
learning_rate = st.slider("Learning rate", 0.001, 0.5, 0.01, step=0.001, format="%.3f")

# Slider de rango (devuelve tupla con mínimo y máximo)
rango_edad = st.slider("Rango de edad", 18, 80, (25, 55))
st.write(f"Filtrar edades entre {rango_edad[0]} y {rango_edad[1]} años")

# Slider de fechas
from datetime import date
fecha_inicio, fecha_fin = st.slider(
    "Período de análisis",
    min_value=date(2020, 1, 1),
    max_value=date(2026, 12, 31),
    value=(date(2025, 1, 1), date(2026, 3, 30))
)
st.write(f"Período: {fecha_inicio} → {fecha_fin}")

Cuando se pasa una tupla como value, el slider se convierte automáticamente en un selector de rango, devolviendo dos valores (mínimo y máximo). Esto es útil para filtrar datos entre dos límites, como rangos de edad, precio o fechas.

flowchart TD
    A[Control numérico o booleano] --> B{"Caso de uso?"}
    B -->|Rango continuo| C[st.slider min max step]
    B -->|Lista discreta| D[st.select_slider valores]
    B -->|On off booleano| E[st.checkbox]
    B -->|On off compacto| F[st.toggle]
    B -->|Color hex| G[st.color_picker]
    C --> H[Devuelve int float o tupla]
    C --> I["value tupla = rango"]
    D --> J[Pasos no numéricos sm md lg]
    E --> K[Devuelve bool]
    F --> K
    G --> L[Devuelve string hex]
    H --> M[Configurador de hiperparametros ML]
    I --> M
    J --> M
    K --> M
    L --> M

st.select_slider: slider sobre valores discretos

A diferencia de st.slider que trabaja con valores numéricos continuos, st.select_slider permite deslizarse entre valores de una lista discreta de opciones. Es la opción adecuada cuando los valores válidos no siguen una secuencia aritmética regular:

import streamlit as st

# Categorías ordenadas
tamaño = st.select_slider(
    "Tamaño del modelo",
    options=["XS", "S", "M", "L", "XL", "XXL"],
    value="M"
)

# Colores como opciones
color_fondo = st.select_slider(
    "Opacidad",
    options=["Transparente", "25%", "50%", "75%", "Sólido"],
    value="75%"
)

# Valores numéricos no lineales (potencias de 2)
batch_size = st.select_slider(
    "Batch size",
    options=[8, 16, 32, 64, 128, 256, 512],
    value=32
)

st.write(f"Batch size: {batch_size} | Tamaño: {tamaño}")

st.checkbox: casilla de verificación booleana

import streamlit as st

# Checkbox básico (devuelve True/False)
mostrar_datos = st.checkbox("Mostrar tabla de datos completa")
normalizar = st.checkbox("Normalizar datos antes del entrenamiento", value=True)
incluir_outliers = st.checkbox("Incluir outliers en el análisis", value=False)

# Usar checkbox para mostrar/ocultar secciones
if mostrar_datos:
    import pandas as pd
    import numpy as np
    df = pd.DataFrame(np.random.randn(50, 3), columns=["A", "B", "C"])
    st.dataframe(df, use_container_width=True)

# Múltiples checkboxes para configuración
st.subheader("Capas del modelo")
capa_conv = st.checkbox("Capa convolucional", value=True)
capa_pool = st.checkbox("Capa de pooling", value=True)
capa_dropout = st.checkbox("Dropout (regularización)", value=False)
capa_batch_norm = st.checkbox("Batch normalization", value=False)

capas_activas = [c for c, act in [
    ("Conv", capa_conv), ("Pool", capa_pool),
    ("Dropout", capa_dropout), ("BatchNorm", capa_batch_norm)
] if act]
st.write(f"Arquitectura: {' → '.join(capas_activas) if capas_activas else 'Vacía'}")

st.toggle: interruptor on/off

st.toggle es funcionalmente equivalente a st.checkbox (devuelve True/False) pero con una apariencia visual de interruptor tipo iOS/Android. La convención de uso es: st.toggle para activar/desactivar funcionalidades o modos, y st.checkbox para seleccionar opciones de una lista:

import streamlit as st

# Toggle básico
modo_avanzado = st.toggle("Modo avanzado")
actualizacion_auto = st.toggle("Actualización automática", value=True)
modo_oscuro = st.toggle("Tema oscuro", value=False)

if modo_avanzado:
    st.info("Modo avanzado activado: se muestran parámetros adicionales.")
    alpha = st.slider("Alpha", 0.001, 1.0, 0.1)
    beta = st.slider("Beta", 0.001, 1.0, 0.9)

st.color_picker: selector de color

import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

# Color picker básico (devuelve string hex)
color_linea = st.color_picker("Color de la línea", "#FF4B4B")
color_relleno = st.color_picker("Color de relleno", "#1F77B4")

# Usar el color en un gráfico
x = np.linspace(0, 10, 100)
y = np.sin(x)

fig, ax = plt.subplots(figsize=(10, 3))
ax.fill_between(x, y, alpha=0.3, color=color_relleno)
ax.plot(x, y, color=color_linea, linewidth=2)
ax.set_title("Función seno con colores personalizados")
st.pyplot(fig)

st.caption(f"Línea: {color_linea} | Relleno: {color_relleno}")

Ejemplo: configurador interactivo de Random Forest

import streamlit as st
import pandas as pd
import numpy as np
from sklearn.ensemble import RandomForestClassifier
from sklearn.datasets import load_iris
from sklearn.model_selection import train_test_split
from sklearn.metrics import accuracy_score

st.title("Configurador de Random Forest")

with st.sidebar:
    st.header("Hiperparámetros")

    n_estimators = st.slider("n_estimators", 10, 300, 100, step=10)
    max_depth = st.slider("max_depth", 1, 20, 5)
    min_samples_split = st.slider("min_samples_split", 2, 20, 2)

    usar_bootstrap = st.toggle("Bootstrap", value=True)
    balancear_clases = st.checkbox("Balancear clases (class_weight='balanced')", value=False)

    color_resultado = st.color_picker("Color del resultado", "#2CA02C")

if st.button("Entrenar modelo", type="primary"):
    data = load_iris()
    X_train, X_test, y_train, y_test = train_test_split(
        data.data, data.target, test_size=0.3, random_state=42
    )

    modelo = RandomForestClassifier(
        n_estimators=n_estimators,
        max_depth=max_depth,
        min_samples_split=min_samples_split,
        bootstrap=usar_bootstrap,
        class_weight="balanced" if balancear_clases else None,
        random_state=42
    )
    modelo.fit(X_train, y_train)
    acc = accuracy_score(y_test, modelo.predict(X_test))

    st.metric("Accuracy en test", f"{acc:.4f}")
    st.markdown(
        f"<div style='color:{color_resultado}; font-size:24px; font-weight:bold;'>✓ Entrenamiento completado</div>",
        unsafe_allow_html=True
    )