原生 range 滑块不渲染任何刻度线，无论连续与否；实现不连续刻度需结合 datalist（仅部分浏览器显示标记点，无吸附）、css 定位刻度标签与 js 控制值对齐、吸附及响应式重算。
range 滑块本身画不出不连续刻度
原生 <input type="range"> 从不渲染任何刻度线，无论连续还是不连续——它只是一条轨道加一个滑块。所谓“不连续刻度”，比如只在 0、25、50、75、100 处标数字，中间空白，这不是 range 元素的能力范围，必须靠外部结构模拟。
用 datalist 声明离散值点（仅视觉对齐，不强制 snapping）
datalist 可以给 range 提供“建议值”，部分浏览器（Chrome、Edge）会在轨道下方显示小标记点，但不控制拖动行为，用户仍可滑到任意位置（包括中间值）。它只是提示，不是约束。
- 写法必须配对：
<input type="range" list="ticks"><datalist id="ticks"><option value="0"></option> <option value="25"></option> <option value="50"></option></datalist> - value 必须是合法数字字符串，不能带单位或空格
- Safari 和 Firefox 完全忽略
datalist对 range 的渲染，iOS 上看不到任何标记 - 即使显示了点，也不代表滑块会自动吸附（snapping）——要吸附得用 JS 拦截
input事件并修正value
真正实现不连续刻度：CSS + JS 手动定位标签
想让刻度只出现在特定位置（如 0、33、66、100），且视觉对齐、点击可跳转，就得放弃原生渲染，用 div 或 span 绝对定位在滑块下方，再用 JS 计算每个标签的 left 百分比位置。
- 公式是：
left = ((value - min) / (max - min)) * 100%;，比如 min="0" max="100"，value=33 → left=33% - 每个刻度
span需设position: absolute，父容器设position: relative且宽度固定 - 点击刻度标签时，直接设置
input.value = targetValue，并触发input事件保证同步 - 别用
change事件监听——用户点标签后没拖动，change不触发，UI 就不同步 - 移动端需加
touch-action: manipulation到标签上，避免滚动冲突
为什么 step="25" 不等于“不连续刻度”
设 step="25" 确实会让合法值变成 0→25→50→75→100，但它不生成视觉刻度标签，滑块轨道依然光秃秃；而且键盘方向键每次也只跳 25，但用户仍可用鼠标拖到 12.7 这种值（除非你用 JS 拦截并 round）。
-
step控制的是值域精度，不是 UI 表达 - 若只想要“视觉不连续”，但允许细粒度拖动（比如视频时间轴缩放后只标整秒），就不能依赖
step，得用 JS 映射：读取原始value后手动四舍五入到最近的刻度点 - 注意 iOS 上
input.valueAsNumber可能返回整数，统一用parseFloat(input.value)更稳
实际最难的不是画几个点，而是让点的位置始终和滑块轨道像素对齐——尤其在缩放、响应式布局下，百分比计算容易漂移，必须监听 resize 重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
