原生 range 输入框需跨浏览器定制样式并确保无障碍：必须加 appearance: none、分前缀处理伪元素、移动端加 touch-action: pan-x；双滑块用单 input + JS 映射；数值标签用 CSS 变量绑定位置；严格同步 aria 属性并支持键盘操作。
range 输入框默认样式根本没法用
浏览器原生 <input type="range"> 在 Chrome、Safari、Firefox 里长得完全不一样，拖拽区域窄、滑块丑、没刻度、移动端响应差——这不是“不够美”，是根本没法传达价格区间这个业务意图。
常见错误现象：appearance: none 忘加或只加在部分浏览器上，结果 Safari 还顶着圆角大滑块，Chrome 却没了轨道；或者只改了滑块（::-webkit-slider-thumb），但轨道（::-webkit-slider-runnable-track）还是默认灰条，视觉断裂。
- 必须对每个浏览器前缀单独处理：
::-webkit-slider-thumb、::-webkit-slider-runnable-track、::moz-range-thumb、::moz-range-track -
appearance: none要写在<input>元素本身上，不是父容器 - 移动端需额外加
touch-action: pan-x，否则 iOS 上拖动卡顿或触发页面滚动
价格筛选需要双滑块？别手写 DOM，用 input[type="range"] + JS 模拟更稳
原生 HTML 不支持双滑块（min/max 同时拖），强行用两个 <input> 会带来同步问题：比如 max 滑块拖到小于 min 时逻辑崩掉，或者 value 更新时机不一致导致 UI 和状态错位。
推荐做法是用单个 <input type="range"> 控制「跨度」，再用 JS 计算实际 min/max 值。这样 DOM 简洁、事件少、无障碍支持好（屏幕阅读器只读一个控件）。
立即学习“前端免费学习笔记（深入）”；
- 设定
min="0"、max="100"，代表归一化区间；真实价格范围通过 JS 映射：realMin = minPrice + (value / 100) * (span) - 监听
input事件（非change），保证拖动过程实时反馈 - 用
requestAnimationFrame批量更新 UI，避免频繁重排影响性能 - 禁用
user-select: none在滑块上，否则 Firefox 下拖动失效
滑块下方显示动态价格数值，CSS 定位容易错位
把 <output></output> 或 <span></span> 放在滑块下方对齐，看似简单，实则受字体、行高、缩放、RTL 影响极大。尤其当滑块宽度随容器变化时，数值标签常偏左/偏右，甚至换行。
可靠方案是用绝对定位 + CSS 自定义属性驱动，把数值位置和滑块 thumb 的 translateX 绑定起来：
input[type="range"] {
--thumb-x: 0;
}
input[type="range"]::-webkit-slider-thumb {
transform: translateX(var(--thumb-x));
}
.output-value {
left: calc(50% + var(--thumb-x));
}然后 JS 中实时更新 style.setProperty('--thumb-x', `${offset}px`)。比用 getBoundingClientRect() 算位置更轻量，也规避了 layout thrashing。
- 不要用
left: 50%+margin-left: -width/2居中，width 动态变时会抖动 - 数值标签加
pointer-events: none，避免遮挡滑块拖拽 - 小屏下建议隐藏数值或改用 tooltip，防止文字溢出挤压滑块区域
无障碍与键盘支持不是加分项，是筛选功能可用的前提
很多定制滑块一按方向键就失灵，或屏幕阅读器读不出当前值和范围，等于直接把视障用户和键盘党挡在价格筛选外。
核心就三点：设对 aria-valuenow、aria-valuemin、aria-valuemax，并保持它们与 JS 状态严格同步；允许 ArrowLeft/ArrowRight（水平）或 Home/End 键操作；确保 focus 样式清晰可见。
- 每次 JS 更新值后，必须同步调用
inputEl.setAttribute('aria-valuenow', value) - 不要用
tabindex="-1"把滑块变成不可聚焦元素 - Chrome 115+ 开始要求
role="slider"配合 aria-* 属性，否则 DevTools 会报无障碍警告 - 测试时关掉图形界面，只用键盘 + VoiceOver/NVDA 操作一遍，比写十行 CSS 都管用
最麻烦的从来不是怎么画个好看的滑块，而是让它的行为和语义跟原生一样稳——尤其是 value 更新时机、键盘响应节奏、以及 min/max 边界判断。这些地方一松懈，用户拖着拖着就卡死在 99.9%，或者点一下跳到 0。
