HTML原生range不支持百分比步长，step="1%"会被忽略；所谓百分比效果需JavaScript将0–100整数映射为带%的显示文本，并用小数参与计算。

HTML原生不支持百分比步长

浏览器根本不识别 step="1%" 这类写法，会直接忽略并退化为 step="1"。你看到的“百分比效果”，其实是靠 JavaScript 手动映射实现的——把 0–100 的整数范围，映射到 0%–100% 的语义值上。

用 JavaScript 将 range 值转为带 % 的显示文本

核心是监听 input 事件，读取 value（始终是数字），再拼接 % 后缀显示给用户。注意别直接改 value，否则会破坏表单提交逻辑。

<input type="range" id="slider" min="0" max="100" value="35">
<span id="display">35%</span>

<script>
const slider = document.getElementById('slider');
const display = document.getElementById('display');

slider.addEventListener('input', () => {
  display.textContent = slider.value + '%';
});
</script>

• 必须用 input 而非 change，才能实时响应拖动
• min/max 设为整数（如 0/100），避免浮点精度问题影响步进控制
• 若需 0.5% 步进，可设 step="0.5"，但注意部分老浏览器对小数 step 支持不佳

需要真·百分比数值参与计算时，统一用小数处理

后端或 CSS 动画通常要的是 0–1 的小数（比如 opacity、transform: scale），而不是字符串 "50%"。这时候别在 JS 里反复做字符串切割，直接按比例缩放：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

const percentValue = parseFloat(slider.value); // 得到 35
const decimalValue = percentValue / 100;       // 得到 0.35

• 避免写 parseFloat(slider.value.replace('%', '')) —— value 本来就是数字，不需要字符串操作
• 如果业务要求步进为 2.5%，就设 step="2.5"，再除以 100 得到 0.025
• Chrome/Firefox 对 step="any" 支持较好，但 Safari 在某些版本中会忽略它，建议显式指定数值

移动端滑块拖动不灵敏？检查 touch-action 和 CSS

iOS Safari 默认对 input[type="range"] 的 touch 行为做了限制，容易出现卡顿或响应延迟。

立即学习“前端免费学习笔记（深入）”；

• 加一行 CSS：input[type="range"] { -webkit-appearance: none; touch-action: manipulation; }
• 不要用 pointer-events: none 或父容器 overflow: hidden 盖住滑块轨道
• 真机测试时，优先用 input 事件而非 touchmove 自行实现——原生控件的触控优化已经足够好

实际项目里最常被忽略的是：把显示值（带%的字符串）和计算值（小数）混用，导致样式抖动或逻辑错位。保持输入域只管整数范围，所有百分比转换都在 JS 层做一次映射，边界就清晰了。