Slider

Control deslizante de rango con barra de caracteres ASCII [====|----] en tiempo real.

// VISTA PREVIA

> SLIDER ASCII SLIDER

Potencia de Sombreado ASCII

[===========|----] 75%

0% 100%

Prop	Tipo TypeScript	Default	Descripción	Variantes
label (Select)	`string`	`undefined`	Etiqueta del menú desplegable estilizado.	—
prefix (Select)	`string`	`''`	Prefijo estilo terminal antes del selector (ej. ENGINE //).	—
options (Select)	`{ value: string; label: string }[]`	`[]`	Lista de opciones seleccionables con valor y texto visible.	—
label (Slider)	`string`	`undefined`	Etiqueta del control deslizante ASCII.	—
min / max (Slider)	`number`	`0 / 100`	Límites numéricos mínimo y máximo del rango.	—
value (Slider)	`number`	`64`	Valor numérico inicial de la corredera.	—
unit (Slider)	`string`	`''`	Unidad de medida visual mostrada (ej. %, MHz, px, ms).	—
variant (Slider)	`'crimson' \| 'cyan' \| 'gold'`	`'crimson'`	Color de la barra activa del slider.	crimson cyan gold

Terminal // Bash BASH

ryukami-ui add slider

src/pages/slider-demo.astro ASTRO

01 ---

02 import Slider from '@/components/Slider.astro';

03 ---

05 <Slider label="Potencia de Sombreado" min={0} max={100} value={75} unit="%" variant="crimson" />