滑块Slider

拖价格上限，看商品卡自己亮 / 灰

滑块不是「一根能拖的条」。当前值、范围、步长、与精确输入的联动、松手才应用，这五件事要落在物件上，不是只靠底部一行说明。

滑块的四件套

刚才面板里反复出现的四件事，命名一下。

• 当前值始终带单位和范围可见。用户不该靠拇指位置猜金额，要在物件头上直接看到「¥600」。
• 范围与边界最小值和最大值来自业务（库存、预算、物理极限）。触顶触底要让物件自己说明，而不是悄悄卡住。
• 步长拖动只落在倍数上（如 100、200…）。换更细的步长时，已有的值要对齐到新刻度，不能停在两个档中间。
• 与精确输入联动连续粗调用滑块，要敲到个位精确值就配输入框，两者双向同步并按步长对齐。

什么时候用它

看到「连续或分段、有自然顺序、粗调即可」这组信号，才考虑滑块。

怎么用对，避开三个坑

标签、当前值、范围同时可见；配输入框给精确值；拖动预览、松手应用。

• 标签 + 当前值 + 两端范围同时可见：<input type="range" min max step value> 配 <output> 或 aria-valuetext 朗读金额。
• 精确值配输入框：金额、时间这类需要个位的任务，给一个 type="number" 与滑块双向同步，越界锁回并说明，不静默改值。
• 松手才请求：拖动时（onInput）只做预览，松手（onChange / onPointerUp）再刷新结果，避免一路狂发筛选请求。
• 键盘可达：方向键按步长 ±1，PageUp/PageDown 大步，Home/End 直接到两端；触顶触底时按钮或物件自己说明。

正反例：选价格上限 vs 选配送方式

同一个「选一个」的界面位置，换一种数据性质，滑块就从顺手变成折磨。