SLIDER
Control deslizante numerico.
En esta página
Props
Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.
| Prop | Tipo | Requerido | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|---|
| name | nombre | No | — | — | Nombre del campo en el formulario. |
| label | texto | No | — | — | Etiqueta visible. |
| helperText | texto | No | — | — | Texto de ayuda bajo el control. |
| placeholder | texto | No | — | — | Texto de ejemplo. |
| bind | nombre | No | — | — | Clave de state enlazada (bidireccional). Admite ruta con puntos: "form.email". |
| bindTo | nombre | No | — | — | Obsoleto: usa bind. |
| value | cualquiera | No | — | — | Valor controlado (normalmente una expresion ${state.x}). |
| defaultValue | cualquiera | No | — | — | Valor inicial. |
| required | booleano | No | truefalse | — | Marca el campo como obligatorio (asterisco + regla required). |
| disabled | booleano | No | truefalse | — | Deshabilita el control. |
| readOnly | booleano | No | truefalse | — | Solo lectura. |
| size | enum | No | "xs""sm""md""lg" | "md" | Tamano en escala. |
| rules | objeto | No | — | — | Reglas de validacion declarativas. |
| onChange | accion(es)acción | No | — | — | Accion al cambiar el valor (recibe value). |
| min | numero | No | — | 0 | Minimo. |
| max | numero | No | — | 100 | Maximo. |
| step | numero | No | — | 1 | Paso. |
| showValue | booleano | No | truefalse | true | Muestra el valor. |
Estructuras anidadas
rules
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| rules.required | booleano | truefalse | — | El valor no puede estar vacio. |
| rules.minLength | numero | 0 … 100000 | — | Longitud minima del texto. |
| rules.maxLength | numero | 0 … 100000 | — | Longitud maxima del texto. |
| rules.min | numero | — | — | Valor minimo (numeros). |
| rules.max | numero | — | — | Valor maximo (numeros). |
| rules.minItems | numero | 0 … 1000 | — | Minimo de elementos (listas). |
| rules.maxItems | numero | 0 … 1000 | — | Maximo de elementos (listas). |
| rules.pattern | regex | — | — | Expresion regular (sin delimitadores) que debe cumplir el texto. |
| rules.email | booleano | truefalse | — | Debe ser un correo valido. |
| rules.url | booleano | truefalse | — | Debe ser una URL http(s) valida. |
| rules.message | texto | — | — | Mensaje de error propio (sustituye al generico). |
Props comunes a todos los componentes
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| hidden | booleano | truefalse | — | true oculta el componente (admite expresiones). |
| onLoad | accion(es)acción | — | — | Accion que se ejecuta una vez al montar. |
| onLoadWhen | cualquiera | — | — | Condicion: onLoad se ejecuta cuando pasa a verdadera. |
| ariaLabel | texto | — | — | Nombre accesible explicito. |
Eventos y acciones que acepta
Props que ejecutan una acción (o cadena de acciones). Las variables disponibles en ${...} dentro de la acción son las que recibe cada evento.
| Evento | Recibe | Descripción |
|---|---|---|
| onChange | ${value} | Accion al cambiar el valor (recibe value). |
| onLoad | — | Accion que se ejecuta una vez al montar. |
Estado y contexto que usa
Cómo interactúa con state y context (expresiones ${...}).
bindEnlace bidireccional: lee y escribe
state.<clave>(admite rutas "a.b"). Vervalue/defaultValue.bindToObsoleto: usa
bind.disabledAdmite una expresión (
${state.x}) para deshabilitar según el estado.value / defaultValueValor controlado por expresión (
${state.x}) o valor inicial único.hidden / onLoadWhenCondiciones comunes:
hidden: "${!state.x}"oculta el componente;onLoadWhenejecutaonLoadal pasar a verdadera.
Simulador interactivo
Renderiza el JSON validado con el mismo renderer y el mismo kit que la app, con el tema actual de esta página. Nada sale a la red: CALL_BACKEND usa una respuesta simulada.
Acciones relacionadas
Acciones que este componente puede disparar desde sus props de acción (cualquiera de UI_ACTIONS) y las que lo controlan. Detalle de cada acción en la sección de acciones.
Usadas en sus ejemplos y manifests
Ninguna.
Acciones que lo controlan
- SET_STATE
Guarda
valueenstate[key](la clave admite ruta con puntos).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Ningún manifest de bloomx-extensions usa todavía este componente. Este es el ejemplo del esquema (ui-examples.ts) dentro de un manifest mínimo.
{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "EMAIL_TOOLBAR",
"component": {
"type": "SLIDER",
"props": {
"label": "Longitud del resumen",
"bind": "length",
"min": 1,
"max": 10,
"step": 1,
"defaultValue": 3
}
}
}
]
}