原生 range input 默认不显示刻度线，仅 firefox 通过 list+datalist 支持无数字的视觉标记；跨浏览器显示带数字刻度需用 css 伪元素模拟等距线或 js 动态生成并同步位置。
range input 默认不显示刻度，必须手动添加
HTML 原生 <input type="range"> 不提供刻度线（tick marks）或数值标签，这是浏览器标准行为，不是 bug。Chrome、Edge、Safari 都不渲染刻度，仅 Firefox 在部分版本中支持 list 属性联动 <datalist></datalist> 显示离散标记——但仅限视觉提示，无文字标注，且不跨浏览器兼容。
所以，真要显示带数字的刻度，得自己画：要么用 CSS 伪元素 + 定位模拟刻度线，要么用 JS 动态生成 DOM 节点，再配合 input 的 min、max、step 计算位置。
用 CSS + datalist 实现 Firefox 专属刻度线（无数字）
Firefox 支持 list 属性绑定 <datalist></datalist>，能渲染小竖线，但仅限该浏览器，且无法控制长度、颜色或添加文字：
<input type="range" min="0" max="100" step="10" list="ticks"><datalist id="ticks"><option value="0"></option> <option value="25"></option> <option value="50"></option> <option value="75"></option> <option value="100"></option></datalist>
注意：<datalist></datalist> 中的 <option></option> 值必须落在 min/max 范围内，且建议与 step 对齐；否则 Firefox 可能忽略部分标记。
- 只在 Firefox 生效，Chrome/Safari 完全无视
list -
<datalist></datalist>不触发任何事件，也无法获取点击位置 - 刻度线样式不可定制（比如加粗、变红、加 label）
用 CSS 伪元素 + calc() 绘制等距刻度线（推荐跨浏览器方案）
核心思路：把 <input> 包进容器，用 ::before 或 ::after 在父容器上画刻度线，位置由 calc() 根据 min/max/step 动态计算。例如每 10 单位一条线，共 11 条（0–100）：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.range-container {
position: relative;
width: 300px;
}
.range-container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(to right,
#000 0%, #000 1px,
transparent 1px, transparent 2px
);
background-size: 30px 100%; /* 每 30px 一个周期 */
background-position: 0 50%;
}
这里用 background-size: 30px 100% 控制间距，对应 range 总宽 300px、步长 10、跨度 100 → 每单位占 3px，10 单位 = 30px。关键点：
- 必须固定
<input>宽度（如width: 100%），否则计算失准 -
background-position调整可微调起始偏移（比如想让第一条线对齐左边缘） - 若需不同步长（如
step="5"），重算background-size：300px / ((max−min)/step) = 单位像素数
用 JS 动态生成带数字的刻度标签（精确可控）
当需要显示具体数值（如“0”“25”“50”）、响应式缩放、或非等距刻度时，JS 是唯一可靠方式。基本步骤：
- 读取
input的min、max、step属性值 - 遍历从
min到max（含）的所有有效值 - 对每个值，计算其在滑块宽度内的百分比位置：
((value − min) / (max − min)) * 100 + "%" - 创建
<span class="tick"></span>插入容器，并设left为计算出的位置，textContent为值
示例片段（假设容器为 <div class="range-wrapper">）：<pre class="brush:php;toolbar:false;">const range = document.querySelector('input[type="range"]');
const wrapper = range.closest('.range-wrapper');
const min = parseFloat(range.min) || 0;
const max = parseFloat(range.max) || 100;
const step = parseFloat(range.step) || 1;
<p>for (let v = min; v ${pos}%;
wrapper.appendChild(tick);
}</p></pre>
<p>注意：<code>v += step 在浮点数下可能累积误差（如 0.1+0.1+0.1 ≠ 0.3），生产环境建议用 Math.round(v * 100) / 100 截断，或改用整数循环再除以精度倍数。
最麻烦的地方不在实现，而在同步：滑块拖动时，刻度标签本身不随缩放/滚动重排，需监听 resize 和 scroll（如果容器可滚动），重新计算位置——这点极易被忽略。
