原生不支持双值区间，必须用两个独立range元素配合JavaScript实时互锁逻辑，确保left≤right，监听input事件、校验数值、同步显示并归一化提交参数。
直接用 input[type="range"] 做价格区间筛选最轻量，但必须手动处理双滑块联动、数值校验和 DOM 同步，原生不支持双值绑定。
为什么不用两个独立的 input[type="number"]？
单独用两个数字输入框看似简单，但实际会破坏用户心智模型：价格区间是强关联的约束条件，不是两个独立参数。常见问题包括：
- 用户先填
maxPrice再填minPrice，结果minPrice > maxPrice，前端没拦截就发请求，后端可能返回空结果或 400 - 清空其中一个输入框时，另一个未自动重置或降级为默认值（如
minPrice=0或maxPrice=Infinity），导致筛选逻辑错乱 - 移动端键盘频繁弹起/收起，体验割裂
HTML 原生 input[type="range"] 只支持单值，要实现「最低价—最高价」双滑块，得用两个 input 元素 + JS 控制互斥逻辑：
关键约束逻辑：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 拖动左侧滑块时，其最大值不能超过右侧当前值：
left.value = Math.min(left.value, right.value) - 拖动右侧滑块时，其最小值不能低于左侧当前值：
right.value = Math.max(right.value, left.value) - 初始值建议设为
left.value = "0"，right.value = "10000"，并同步显示在旁的span标签里 - 务必监听
input事件（非change），保证实时反馈
示例片段：
<input type="range" id="priceMin" min="0" max="50000" value="0"><input type="range" id="priceMax" min="0" max="50000" value="50000"><span id="minLabel">¥0</span> — <span id="maxLabel">¥50000</span>
提交时如何构造合法查询参数？
后端接口通常只接受 min_price 和 max_price 两个字段，但需注意边界容错：
- 如果用户没动过滑块，应忽略该参数（而非传
0或50000），避免误筛 - 若
min_price === max_price，有些接口会当作「精确匹配」，有些则忽略，需与后端对齐语义 - 推荐在提交前做归一化：
const params = {};然后按需赋值：if (minVal > 0) params.min_price = minVal;，if (maxVal - 不要把
0当作「未填写」——它可能是有效价格（如免费商品），应以「是否被用户修改过」为判断依据，可用dataset.initial或闭包缓存初始值
双滑块交互本身不难，难的是让「未操作」「部分操作」「边界相等」「移动端拖拽松手延迟」这些状态都表现一致。很多人卡在松手瞬间的数值跳变，其实只要坚持在 input 事件里做 clamp 并立即更新 label，就能覆盖 95% 的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
