必须显式设置 min、max、value 和 step 才能保障语义、表单提交、无障碍及移动端可用性；定制样式需跨浏览器重置伪元素并扩展热区；非线性映射须用 JS 实时转换而非依赖 step。
range 类型不是用来“展示范围”的视觉组件，而是语义明确的数值输入控件；所有样式定制必须以功能可用为前提，否则会破坏表单提交、无障碍访问和移动端触控。
为什么直接写 <input type="range"> 会出问题
不设 min、max、value 时，浏览器虽按默认值（min="0"、max="100"、value="50"）渲染，但语义丢失：表单序列化时可能忽略该字段，JS 读取 slider.value 可能返回空字符串或意外初始值，屏幕阅读器无法播报有效范围。
- 必须显式声明三者，哪怕值和默认一致（如
value="0"） -
step不设时默认为1，但若业务需小数（如亮度 0.0–1.0），必须写step="0.01"或step="any"，后者禁用键盘方向键微调 - 未加
id和配套<label for="xxx"></label>时，移动端点击文字无法聚焦滑块，可访问性失败
监听 input 事件而不是 change 的真实原因
change 只在用户松手或失焦后触发一次，而音量调节、实时滤镜预览等场景需要拖动过程中的连续反馈。用 change 绑定会导致 UI 卡顿、数值跳变，且无法响应键盘方向键的实时调整（方向键操作也走 input 流）。
-
event.target.value永远是字符串，参与计算前必须转成数字：Number(slider.value)或parseFloat() - 别用内联
oninput属性（如oninput="handle()"），它绑定的是全局函数，不利于模块化和状态管理 - React/Vue 等框架中，直接改 DOM 的
value属性却不更新组件 state，会触发「非受控到受控」警告，后续拖动失效
CSS 定制必须处理的跨浏览器断点
各浏览器对伪元素支持差异大，漏掉任一内核都会导致样式回退到丑陋原生控件，甚至轨道/滑块错位。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 先重置外观：
input[type="range"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }—— 缺少任一前缀，Chrome/Safari/Firefox 中自定义样式将无效 - 轨道样式要分开写：
::-webkit-slider-runnable-track（Chrome/Safari）、::-moz-range-track（Firefox）、Safari 还需额外加background到主选择器才生效 - 滑块尺寸必须用物理像素（如
width: 24px），iOS Safari 对transform: scale()不响应触摸事件，放大了也拖不动 - 移动端热区窄：给
input[type="range"]加height: 8px和padding: 12px 0扩展可点击区域，比只放大 thumb 更可靠
非线性映射不能靠 step 解决
step 只支持等差数列，无法表达对数音量、指数缩放、自定义数组索引等逻辑。例如把滑块 0–100 映射到 -60dB～0dB，必须用 JS 实时计算。
- 保持滑块本身仍是线性（
min="0" max="100" step="1"），只在事件回调里做转换：const db = -60 + (value / 100) * 60 - 显示给用户的数值（如
<output></output>或旁白）应使用映射后值，但表单提交仍用原始value或隐藏字段存映射结果 - 避免在
input事件里频繁重设slider.value，会打断用户拖动，造成卡顿或跳值
最易被忽略的一点：所有样式重置都必须搭配 touch-action: manipulation（Android Chrome 90+）或 cursor: pointer（iOS），否则在部分安卓机型上滑块响应延迟明显，用户会误以为“坏了”。
