Summary
Add a SliderWidget for numeric range input — the TUI equivalent of HTML <input type="range">. Common use case: settings panels for volume, opacity, speed, etc.
Expected API
Following the existing widget options pattern (see ProgressWidgetOptions in packages/core/src/widgets/progress/types.ts):
type SliderWidgetOptions = {
x?, y?, width?, height?: TuiSizeValue;
min?: number; // default 0
max?: number; // default 100
step?: number; // default 1
value?: number; // default min
disabled?: boolean;
colorTrackNormal?, colorFillNormal?: TuiColor;
colorTrackDisabled?, colorFillDisabled?: TuiColor;
};
Behavior
- Keyboard: ArrowLeft/ArrowRight (or ArrowUp/ArrowDown) increment/decrement by
step; Home/End jump to min/max (follows the RadioGroup / SelectButton Home/End convention).
- Mouse: click on track jumps to position; drag thumb to scrub.
- Events:
change event with {value} when committed (release / blur); input event for live updates during drag (matches HTML).
- Extends
InteractiveWidget (must be focusable, unlike ProgressWidget).
Context
Identified in the now-removed docs/missing-widgets.md as an HTML-parity widget. The existing ProgressWidget shares bar-rendering geometry and is a good starting point for the track/fill drawing.
Affected directory: packages/core/src/widgets/slider/ (new)
概要
新增 SliderWidget 数值范围选择 widget —— HTML <input type="range"> 的 TUI 等价物。典型场景:音量、透明度、速度等设置面板。
期望 API
遵循现有 widget options 模式(参考 packages/core/src/widgets/progress/types.ts 中的 ProgressWidgetOptions):
type SliderWidgetOptions = {
x?, y?, width?, height?: TuiSizeValue;
min?: number; // 默认 0
max?: number; // 默认 100
step?: number; // 默认 1
value?: number; // 默认 min
disabled?: boolean;
colorTrackNormal?, colorFillNormal?: TuiColor;
colorTrackDisabled?, colorFillDisabled?: TuiColor;
};
行为
- 键盘:ArrowLeft/ArrowRight(或 ArrowUp/ArrowDown)按
step 增减;Home/End 跳到 min/max(沿用 RadioGroup / SelectButton 的 Home/End 约定)。
- 鼠标:点击轨道跳到对应位置;拖动滑块实时调节。
- 事件:提交时(释放 / 失焦)触发
change 事件,携带 {value};拖动过程中触发 input 事件用于实时更新(与 HTML 一致)。
- 继承
InteractiveWidget(必须可聚焦,与 ProgressWidget 不同)。
背景
此项来自已移除的 docs/missing-widgets.md,识别为需要补齐的 HTML 等价 widget。现有 ProgressWidget 共享进度条几何渲染,可作为轨道/填充绘制的起点。
受影响目录: packages/core/src/widgets/slider/(新增)
Summary
Add a
SliderWidgetfor numeric range input — the TUI equivalent of HTML<input type="range">. Common use case: settings panels for volume, opacity, speed, etc.Expected API
Following the existing widget options pattern (see
ProgressWidgetOptionsinpackages/core/src/widgets/progress/types.ts):Behavior
step; Home/End jump to min/max (follows the RadioGroup / SelectButton Home/End convention).changeevent with{value}when committed (release / blur);inputevent for live updates during drag (matches HTML).InteractiveWidget(must be focusable, unlikeProgressWidget).Context
Identified in the now-removed
docs/missing-widgets.mdas an HTML-parity widget. The existingProgressWidgetshares bar-rendering geometry and is a good starting point for the track/fill drawing.Affected directory:
packages/core/src/widgets/slider/(new)概要
新增
SliderWidget数值范围选择 widget —— HTML<input type="range">的 TUI 等价物。典型场景:音量、透明度、速度等设置面板。期望 API
遵循现有 widget options 模式(参考
packages/core/src/widgets/progress/types.ts中的ProgressWidgetOptions):行为
step增减;Home/End 跳到 min/max(沿用 RadioGroup / SelectButton 的 Home/End 约定)。change事件,携带{value};拖动过程中触发input事件用于实时更新(与 HTML 一致)。InteractiveWidget(必须可聚焦,与ProgressWidget不同)。背景
此项来自已移除的
docs/missing-widgets.md,识别为需要补齐的 HTML 等价 widget。现有ProgressWidget共享进度条几何渲染,可作为轨道/填充绘制的起点。受影响目录:
packages/core/src/widgets/slider/(新增)