iter: d09 新增滑块 slider 组件

packages/skin/ui/src/index.ts

@@ -2,6 +2,7 @@ export * from './types.js';
 export { button } from './button.js';
 export { textField } from './textField.js';
 export { textarea } from './textarea.js';
+export { slider } from './slider.js';
 export { checkbox } from './checkbox.js';
 export { switchButton } from './switch.js';
 export { select } from './select.js';

packages/skin/ui/src/slider.ts

@@ -0,0 +1,32 @@
+import { effect, h } from '@ui-arch/frame';
+import type { SliderProps } from './types.js';
+
+/*** 滑块：原生 range 承载交互与键盘，value 信号双向绑定；轨道配色走 accent-color 令牌 ***/
+export function slider(props: SliderProps): HTMLElement {
+  const value = props.value; // 必需信号：组件不持有数值，一律委托调用方
+  const input = h('input', {
+    type: 'range',
+    class: 'ua-slider-input',
+    min: props.min ?? 0,
+    max: props.max ?? 100,
+    step: props.step ?? 1,
+    disabled: props.disabled, // 布尔或信号禁用，h() 直接透传
+  }) as HTMLInputElement;
+
+  input.addEventListener('input', () => {
+    const next = Number(input.value);
+    value(next);                    // 用户拖动写回信号
+    props.onChange?.(next);
+  });
+  effect(() => {
+    const next = String(value());
+    if (input.value !== next) input.value = next; // 外部赋值同步滑块位置（等值不重写，避免打断拖动）
+  });
+
+  return h(
+    'div',
+    { class: 'ua-slider' },
+    input,
+    props.showValue === false ? null : h('span', { class: 'ua-slider-value' }, () => String(value())),
+  );
+}

packages/skin/ui/src/types.ts

@@ -137,6 +137,17 @@ export interface AccordionProps {
   onChange?: (active: string) => void; // 展开变化回调：收起时传空串
 }
 
+/*** 滑块入参 ***/
+export interface SliderProps {
+  value: Signal<number>;   // 当前值信号，双向绑定（拖动写回、外部赋值同步）
+  min?: number;            // 最小值；缺省 0
+  max?: number;            // 最大值；缺省 100
+  step?: number;           // 步长；缺省 1
+  disabled?: boolean | Signal<boolean>; // 禁用态：布尔直接置位，传信号则动态同步
+  showValue?: boolean;     // 是否右侧显示当前值；缺省 true
+  onChange?: (value: number) => void; // 拖动回调
+}
+
 /*** 多行输入入参 ***/
 export interface TextareaProps {
   placeholder?: string;              // 占位文案