Component Catalog
Slider
Range input with min/max and live value display.
A2UI → Nuxt UI Mapping
| A2UI Property | Nuxt UI Result |
|---|---|
value | USlider v-model |
min / max | Range bounds |
label | Label text above slider |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"slider_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"slider_demo","components":[
{"id":"root","component":"Column","children":["volume","brightness"]},
{"id":"volume","component":"Slider","label":"Volume","value":75,"min":0,"max":100},
{"id":"brightness","component":"Slider","label":"Brightness","value":50,"min":0,"max":255}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
value | number | ✅ | 0 | Current value |
min | number | — | 0 | Minimum value |
max | number | — | 100 | Maximum value |
label | string | — | — | Label displayed above the slider |
Rendering Details
- The label shows on the left with the current numeric value on the right
- Uses
USliderfrom Nuxt UI - Value updates reactively as the user drags
Try It
Copy the JSONL above and paste it in the Playground Paste tab.