移动端原生 range 滑不顺是因浏览器将滑动交由系统级滚动处理，导致 ios 回弹、android 延迟；需用 touchstart/touchmove/touchend 自研滑动选择器，核心是 preventdefault、clientx 定位、比例计算与 step 对齐。
移动端原生 input type="range" 在 iOS/Android 上为什么滑不顺？
因为默认 range 滑块在 Safari（尤其 iOS 15+）上会触发页面回弹、手势冲突，且无法自定义轨道高度和 thumb 样式；Android Chrome 虽支持度好些，但拖动响应延迟明显，手指离开后常有“惯性跳变”。这不是 bug，是浏览器对表单控件的主动保护策略——它把滑动交给了系统级滚动处理，绕过了 JS 的 touch 事件流。
所以别硬改 input[type="range"]，真要滑得准、停得稳、样式可控，就得自己造一个基于 touch 的轻量级滑动选择器。
用 touchstart/touchmove/touchend 实现像素级滑动定位
核心不是“监听滑动”，而是把屏幕坐标映射到数值区间。关键在三点：防止默认行为、记录起始位置、实时计算偏移比。
- 必须在
touchstart中调用event.preventDefault()，否则 iOS 会抢走 touch 事件并触发页面滚动 -
touchstart记下event.touches[0].clientX和当前值，touchmove用差值除以容器宽度算比例，再乘以最大值减最小值 - 别直接用
pageX——它受页面缩放、滚动位置影响；clientX更稳定 - 加个防抖：连续
touchmove里只在位移 ≥ 2px 时更新值，避免微抖误触发
<div id="picker" class="picker">
<div class="track"><div class="thumb"></div></div>
</div>
<p><script>
const picker = document.getElementById('picker');
const track = picker.querySelector('.track');
const thumb = picker.querySelector('.thumb');
let isDragging = false;
let startX, startValue, range = { min: 0, max: 100, step: 1 };</script></p><p>picker.addEventListener('touchstart', e => {
e.preventDefault();
const rect = track.getBoundingClientRect();
startX = e.touches[0].clientX;
startValue = parseFloat(thumb.dataset.value) || range.min;
isDragging = true;
});</p><p>picker.addEventListener('touchmove', e => {
if (!isDragging) return;
e.preventDefault();
const dx = e.touches[0].clientX - startX;
const percent = Math.max(0, Math.min(1, dx / track.offsetWidth + startValue / (range.max - range.min)));
const value = Math.round(percent <em> (range.max - range.min) + range.min);
const snapped = Math.round(value / range.step) </em> range.step;
thumb.style.left = <code>${(snapped - range.min) / (range.max - range.min) * 100}%</code>;
thumb.dataset.value = snapped;
});</p><p>picker.addEventListener('touchend', () => {
isDragging = false;
});
</p>
为什么不用 hammer.js 或 swiper？
它们太重。一个滑动选择器不需要多点缩放、轮播、惯性滚动——引入整套手势库，光 JS 就 30KB+，还会干扰页面已有的 touch 事件（比如嵌套在 scrollable 区域里时，swiper 默认会禁用父容器滚动，导致列表卡死）。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正需要的只是：touchstart 锁定起点、touchmove 算比例、touchend 清状态。20 行原生代码搞定的事，没必要让框架替你做判断。
- 如果项目已用
hammer.js，可复用其pan事件，但记得设direction: Hammer.DIRECTION_HORIZONTAL和threshold: 0 - 千万别用
mouse事件模拟——PC 端测试没问题，一上真机就失效，iOS Safari 不触发mousedownon touch - Android WebView 里若发现 touch 失效，检查是否设置了
-webkit-user-select: none在父元素上，它会拦截 touchstart
滑动结束后的值校验和边界处理容易漏哪？
用户快速甩动后松手，thumb 可能停在非 step 对齐的位置，或者超出 min/max。这时候不能只靠 CSS left 百分比——它只是视觉反馈，真实值必须重新规整。
- 在
touchend后立刻执行一次值快照：读thumb.dataset.value，用Math.min(max, Math.max(min, value))截断，再按step对齐 - 别忘了 dispatch 自定义事件，比如
new CustomEvent('change', { detail: { value } })，方便外部监听 - 如果支持键盘焦点（PC 端辅助需求），得补
keydown监听：Left/Right 增减 step，Home/End 跳到 min/max - 无障碍方面，给
thumb加role="slider"、aria-valuenow、aria-valuemin、aria-valuemax，否则 VoiceOver 读不出当前值
滑动选择器真正的复杂点不在拖动本身，而在拖完那一瞬间的“收尾”：怎么让视觉、数据、无障碍、键盘操作全部对齐。少做一步，用户就会觉得“卡了一下”或“点不准”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
