ui-arch-bot
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
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())),
|
|
);
|
|
}
|