HTML5原生range不支持双滑块，需用两个range输入框+JavaScript双向约束实现价格区间筛选：拖动时防止min>max或max<min，并通过CSS重叠定位和伪元素模拟共轨双滑块效果。
HTML5 原生 <input type="range"> 只支持单滑块，无法直接实现双滑块（如价格区间：最低价 + 最高价）。要实现双滑块价格筛选器，需用两个独立的 range 输入框 + JavaScript 协同控制，并配合 UI 优化防止滑块越界（比如“最低价不能超过最高价”）。
基础结构：两个 range 输入框 + 显示数值的 span
用两个 input[type="range"] 分别代表最小值和最大值，再用两个 span 实时显示当前值。注意设置相同的 min、max、step，并初始值错开（如 min=0, max=1000）：
<div class="price-range"> <label>价格区间：</label> <input type="range" id="minPrice" min="0" max="1000" step="10" value="100"> <span id="minValue">100</span> — <span id="maxValue">500</span> <input type="range" id="maxPrice" min="0" max="1000" step="10" value="500"> </div>
核心逻辑：双向约束与实时同步
关键在于让两个滑块互相限制——拖动 min 时，max 不能小于 min；拖动 max 时，min 不能大于 max。同时更新对应显示值：
- 监听两个
input的input事件（非change），保证拖动过程实时响应 - 在 min 滑块更新时，检查若
minValue > maxValue，则强制把maxPrice.value = minValue，并更新maxValue显示 - 同理，在 max 更新时，若
maxValue < minValue，则同步修正minPrice.value - 每次修改后，手动触发
input事件或调用更新函数，确保 UI 和数据一致
视觉优化：让两个滑块看起来像一个整体
原生 range 样式简陋且浏览器差异大。可通过 CSS 覆盖实现“双滑块共用一条轨道”的效果：
- 将两个
input重叠定位（position: absolute），用透明度/z-index 区分层级 - 自定义轨道背景：用伪元素
::before绘制底色条，再用另一个伪元素根据当前 min/max 计算宽度，画出中间选中段（如蓝色高亮区） - 隐藏默认滑块，用
::after为每个 input 自定义圆形手柄，并添加左右偏移区分 - 为避免遮挡，可给 min 手柄加
z-index: 3，max 手柄加z-index: 2
补充建议：兼容性与交互增强
原生 range 在 iOS Safari 和旧版 Android 上可能有拖动延迟或样式异常：
- 务必设置
touch-action: none提升触摸响应 - 对移动端，可监听
touchstart/touchmove做降级处理 - 增加键盘支持：允许用户 tab 切换、方向键微调（监听
keydown，按 ←→ 增减step） - 最终筛选时，取
parseInt(minPrice.value)和parseInt(maxPrice.value)作为查询参数，注意校验有效性（如 min ≤ max）
