原生 range 输入框可通过伪元素定制样式并保证跨浏览器兼容，需分别处理 webkit、firefox 和 safari 的前缀规则，同时正确使用 input/change 事件及无障碍属性。
如何用 <input type="range"> 设置基础样式和行为
原生 <input type="range"> 默认样式丑、难定制，但不用 JS 就能调出可用效果。关键是通过伪元素控制滑块轨道和滑块本身，且必须注意浏览器兼容写法差异。
常见错误是直接对 input 本身设 width 或 background，这只能影响容器框，真正要改的是 ::-webkit-slider-thumb 和 ::-webkit-slider-runnable-track（Chrome/Safari），Firefox 则用 ::thumb 和 ::track。
-
min、max、step必须显式设置，否则默认min=0、max=100、step=1，容易导致数值跳变或精度失控 - Firefox 不支持
::-moz-range-thumb外的其他伪类，且appearance: none是必需前置项，否则自定义样式无效 - 移动端 iOS Safari 对
height和border-radius的响应不一致，建议用transform: scale()微调滑块大小而非直接改width/height
input[type="range"] 的跨浏览器样式适配写法
没有“一套 CSS 通吃所有浏览器”的写法，必须分 vendor 前缀写。重点不是覆盖全部，而是保证 Chrome、Firefox、Safari 三端基本一致且可交互。
示例中只保留最简必要规则：
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 6px;
background: #e0e0e0;
border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #2196f3;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #2196f3;
border: none;
cursor: pointer;
}
注意：appearance: none 在 Firefox 中必须写在 input[type="range"] 规则里，不能只写在伪元素上；::-webkit-slider-runnable-track 可以用来单独设轨道背景，但若只设 input 本身背景，多数场景已够用。
监听滑动值变化时该用 input 还是 change 事件
用户拖动过程中实时响应要用 input 事件，松手后才触发一次用 change。选错会导致 UI 同步延迟或性能浪费。
-
input：每次滑块位置变化都触发（包括键盘方向键、触屏拖动），适合实时预览、进度反馈 -
change：仅在用户结束交互（鼠标抬起、触屏离开、失去焦点）时触发，适合提交表单值、存入 localStorage - 不要在
input事件里做重计算或 DOM 更新，容易卡顿；可加requestAnimationFrame节流，但多数简单场景直接用即可
示例绑定：
const slider = document.querySelector('input[type="range"]');
slider.addEventListener('input', () => {
console.log(slider.value); // 实时输出
});
slider.addEventListener('change', () => {
localStorage.setItem('sliderValue', slider.value); // 仅存最终值
});
禁用状态与无障碍支持常被忽略的细节
disabled 属性会让控件不可交互，但默认样式灰度不够、焦点不可达、屏幕阅读器可能读不出当前值 —— 这些不是“附加功能”，而是可用性底线。
- 加
disabled后务必补上opacity: 0.6和cursor: not-allowed，否则视觉无反馈 - 用
aria-valuenow、aria-valuemin、aria-valuemax显式声明数值范围，否则 VoiceOver/NVDA 无法正确播报 - 不要用
pointer-events: none代替disabled，它会切断所有事件，包括focus和aria属性的语义传递
正确写法：
<input type="range" min="0" max="100" step="1" value="42" aria-label="音量调节" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100" disabled>
真正麻烦的不是写样式，而是当 min/max 动态变化时，要同步更新 aria- 属性和 value —— 这部分逻辑容易漏掉，尤其在 React/Vue 的响应式更新里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
