FORM & INPUT
范围双滑块Range Slider
两个滑块同时划定一段区间，常用于价格、时间、评分范围。
效果预览
¥200¥800
¥0¥1,200
适合用在哪
价格筛选、年龄区间、日期范围、数值范围过滤。
不适合：精确数值很重要的场景（如价格精确到分）或可选值很少的离散场景（如 1-5 星），用 Range Slider 用户难以选对；列表数据直接用分页或筛选 Chips 更清晰。
和相近模式的区别
区间滑块Range Slider
form-range 是单 thumb 选一个数值；Range Slider 是双 thumb 选一个区间，需要处理两个 thumb 的边界和交叉。
容易踩的坑
- 两个 thumb 的气泡在接近时重叠，数字互相遮挡。
- 未限制 thumb 交叉，用户可以把最小值拖到比最大值还大，导致筛选条件逻辑颠倒。
- 移动端 thumb 只有 18px 宽，手指很难精准拖动，应把点击热区扩到 44px。
设计提示词 · Prompt
范围双滑块（Range Slider）：一条 4-6px 高的圆角轨道。轨道分三段：未选左段（浅灰 #e5e7eb）、已选中段（品牌渐变或品牌色）、未选右段（浅灰）。两个 thumb 都是 18-22px 圆形、白底 + 2px 品牌色描边 + 投影，禁止交叉。已选中段高度与轨道一致，圆角 999px。滑块正上方浮一个深色或白底小气泡显示当前值；拖动时气泡放大。键盘：←→ 每次移动一个 step，Shift+方向键 每次移动 10 个 step。
Range Slider: a 4-6px tall rounded track divided into three segments — unselected left (light gray #e5e7eb), selected middle (brand color or gradient), unselected right (light gray). Two 18-22px circular thumbs: white fill + 2px brand stroke + 0 2px 6px rgba(0,0,0,.16) shadow. On drag the thumb scales 1.1x; each thumb floats a small value bubble with a downward triangle. Thumbs cannot cross. Keyboard: arrows move one step, Shift+arrows move ten steps.
可复制 CSS
自包含的最小实现，粘贴到空白页面即可生效；类名可以按项目规范改名。
/* <div class="range-slider"><div class="range-slider__track"><i class="range-slider__fill"></i><b class="range-slider__thumb range-slider__thumb--l"><span>200</span></b><b class="range-slider__thumb range-slider__thumb--r"><span>800</span></b></div></div> */
.range-slider { --v1: 24%; --v2: 72%; width: 280px; }
.range-slider__track { position: relative; height: 6px; border-radius: 999px; background: #e5e7eb; }
.range-slider__fill { position: absolute; left: var(--v1); right: calc(100% - var(--v2)); height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #c026d3); }
.range-slider__thumb { position: absolute; top: 50%; width: 20px; height: 20px; border: 2px solid #4f46e5; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0,0,0,.16); cursor: grab; }
.range-slider__thumb--l { left: var(--v1); }
.range-slider__thumb--r { left: var(--v2); }
.range-slider__thumb span { position: absolute; bottom: calc(100% + 6px); left: 50%; padding: 3px 8px; border-radius: 6px; background: #17171b; color: #fff; font: 12px/1 system-ui, sans-serif; transform: translateX(-50%); }
演示 HTML 结构
<div class="s d-center">
<div class="form-ranges">
<div class="form-ranges__track"><i class="form-ranges__fill" style="left:17%;right:33%"></i><span class="form-ranges__thumb form-ranges__thumb--l" style="left:17%"><b>¥200</b></span><span class="form-ranges__thumb form-ranges__thumb--r" style="left:67%"><b>¥800</b></span></div>
<div class="form-ranges__ends"><span>¥0</span><span>¥1,200</span></div>
</div>
</div>
常见问题
两个 thumb 的气泡重叠怎么办？
当两个值接近时，把气泡合并成一个显示 "¥200 - ¥800"，或让两个气泡分别位于 thumb 上下两侧错开。
移动端如何提升拖动精度？
把 thumb 的点击热区扩大到 44×44px（可用透明 ::after 外扩），并在拖动时临时放大 thumb 1.2 倍；step 粒度不宜过小。
常见搭配
同一页面里经常和「范围双滑块」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。