移动端input[type="range"]自定义样式需放弃原生控件：ios safari点击失效因触摸区域过窄且缺touch-action: manipulation；安卓webview渐变断层需用css变量动态控制；firefox和微信webview不支持webkit伪元素，应降级为div+js拖拽实现。
移动端 input[type="range"] 的样式自定义，Chrome/Safari 可行，Firefox 和大部分 WebView（尤其旧版 Android）基本不支持伪元素控制，硬套 CSS 会直接失效。
为什么 ::-webkit-slider-thumb 在 iOS Safari 里有时不响应点击？
iOS Safari 对原生 range 的触摸区域判定极窄，尤其滑块尺寸小、父容器有 transform 或 scale 时，实际可点击区域可能被压缩到 1–2px。更麻烦的是，它默认没启用 touch-action: manipulation，手指一滑容易触发页面滚动而非拖动滑块。
- 给
input[type="range"]显式加touch-action: manipulation - 用
min-width/min-height把::-webkit-slider-thumb设到至少24px，避免被 Safari 裁剪 - 确保父容器没设
transform: scale()或will-change: transform，否则伪元素定位会偏移
::-webkit-slider-runnable-track 背景渐变在安卓 WebView 里颜色断层怎么修？
用 background: linear-gradient(to right, #4a90e2 0%, #4a90e2 65%, #e0e0e0 65%) 这类写法，在部分安卓 WebView（如 UC、QQ 浏览器内核）中会因 background-size 计算错误导致进度色突然跳变或留白。
- 别直接用百分比值写死进度位置，改用 CSS 变量驱动：
background: linear-gradient(to right, #4a90e2 0%, #4a90e2 calc(var(--progress) * 1%), #e0e0e0 calc(var(--progress) * 1%)) - JS 更新时同步设置
element.style.setProperty('--progress', value)，不要只改value属性 - 若需兼容性更强，放弃渐变，用
::before绝对定位一层div模拟已滑过部分，由 JS 控制其width
怎样让自定义滑动条在 Firefox 和微信内置浏览器里不“消失”？
Firefox 完全无视 ::-webkit- 系列伪元素；微信安卓版（X5 内核）虽基于 WebKit，但对 ::-webkit-slider-container 支持极不稳定，常导致整个滑块不可见或轨道错位。
- 检测浏览器：用
typeof InstallTrigger !== 'undefined'判 Firefox，navigator.userAgent.includes('Miniprogram')判微信小程序 WebView - Firefox 下直接降级为
input[type="number"]+ 自定义按钮增减，或渲染一个带拖拽逻辑的div滑块 - 微信环境建议统一 fallback：用
div+tabindex="0"+mousedown/touchstart手动实现拖动，绕过所有伪元素依赖
真正跨端稳定的方案，不是堆更多 CSS 前缀，而是主动放弃原生 range —— 它的 DOM 结构不可控、事件行为不一致、移动端 touch 响应链太深，一旦需要精确进度反馈或动画联动，JS 补丁会越打越多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
