Skip to content

Slider widget (HTML <input type="range"> equivalent) #46

Description

@AlphaFoxz

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/(新增)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Feature gap / DX improvementenhancementNew feature or requestlibTypeScript packages (core, compiler, extensions, playground, buntui)

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions