Duration Picker new 时长选择器 Duration Picker web
A compact control for choosing an amount of time
用于选择一段时间长度的紧凑控件
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Unit field单位字段
input[type=number]One labelled numeric field for hours or minutes.
用于输入小时或分钟的带标签数字字段。
Prompt fragmentPrompt 片段a compact numeric field with an explicit Hours or Minutes label and a visible unit suffix
紧凑数字字段，明确标注 Hours 或 Minutes，并显示单位后缀
-
2 Duration presets时长预设
button groupCommon lengths that set the picker in one action.
一步设置选择器的常用时长。
Prompt fragmentPrompt 片段15 min, 30 min, and 1 hr preset buttons with a persistent selected state
15 分钟、30 分钟和 1 小时预设按钮，保留持续的选中状态
-
3 Duration summary时长摘要
outputA readable sentence that confirms the combined time span.
确认合计时长的可读句子。
Prompt fragmentPrompt 片段a live summary such as Total duration: 45 minutes, placed beside the controls
把 Total duration: 45 minutes 这样的实时摘要放在控件旁边
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a duration picker for hours and minutes. Use labelled numeric controls with sensible min/max/step values, normalize 60 minutes into the next hour, support keyboard increment/decrement, provide quick presets, and keep the total duration visible. Use tabular numerals, clear disabled boundaries, and a concise validation message; honor prefers-reduced-motion for preset feedback.
构建一个小时和分钟时长选择器。为每个数字控件提供标签、合理的 min/max/step；把 60 分钟进位为 1 小时；支持键盘增减；提供常用预设；始终显示总时长。使用等宽数字、清晰的边界禁用状态和简洁校验消息；预设反馈遵守 prefers-reduced-motion。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my duration picker. Check that hours and minutes have separate labels; values clamp at valid bounds; 60 minutes carries into hours; keyboard and pointer steppers agree; presets update both units; a zero duration is handled intentionally; errors do not shift the form; screen readers hear the unit and total; and reduced-motion users still see the selected preset. The symptom:
调试我的时长选择器。检查：小时和分钟是否分别有标签；值是否限制在有效范围；60 分钟是否进位到小时；键盘和鼠标步进是否一致；预设是否同时更新两个单位；零时长是否有明确处理；错误消息是否不让表单跳动；屏幕阅读器是否听到单位和总时长；reduced-motion 用户是否仍能看见选中的预设。症状：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | input[type=number] | use min, max, step and labels for each unit用 min、max、step 和标签约束每个单位 |
| ARIA | role="group" + aria-describedby | keep the units and constraints understandable让单位和限制对辅助技术清晰可懂 |
| JS | clamp + step | normalize minutes and carry into hours把分钟规范化，并在需要时进位到小时 |
| CSS | font-variant-numeric: tabular-nums | keep changing values from nudging the layout让变化中的数字不把布局顶来顶去 |