最轻量原生方案是 input[type="range"]，需设 min="1"、max="5"、step="1"，配 label 或 aria-label，用 input 事件实时反馈，CSS 伪元素模拟星级，移动端加 touch-action: manipulation，value 须安全转换为数字。
用 input[type="range"] 搭建基础评分结构最轻量
原生 input[type="range"] 是实现评分组件最稳妥的起点，语义正确、无障碍支持好、无需额外依赖。它天然具备值绑定、键盘可操作（左右键/方向键调节）、屏幕阅读器识别等能力。
关键点在于：不要直接用 div + span 手动拼星星——那会丢失焦点管理、键盘导航和 ARIA 语义。
- 设置
min="1"、max="5"、step="1"，确保只接受整数分 - 必须加
aria-label或关联label，例如<label for="rating">您的评分</label><input id="rating" type="range" ...> - 默认值建议设为
value="0"或不设，避免误导用户已提交
用 CSS 自定义滑块外观时，::-webkit-slider-thumb 和 ::before 必须配合使用
Chrome/Safari 的滑块拖拽点（thumb）能用 ::-webkit-slider-thumb 样式化，但仅改 thumb 不够——轨道（track）默认是灰色细条，视觉上不像“评分”。需要同时覆盖 ::-webkit-slider-runnable-track 并用伪元素模拟星级填充效果。
- 不要试图用
background-image直接铺满 track：无法随 value 动态裁剪 - 推荐方案：用
position: relative包裹 input，再用::before伪元素绝对定位在 track 下方，宽度由 JS 动态设为(value / max) * 100% - Firefox 需单独处理
::-moz-range-thumb和::-moz-range-track，样式需重复声明
监听 input 事件比 change 更适合实时反馈
用户拖动滑块时，希望立即看到当前分数（比如旁边显示 “4星”），而不是等松手才更新。这时必须用 input 事件，而非 change ——后者只在交互结束（blur 或回车）时触发。
立即学习“前端免费学习笔记（深入）”；
-
input事件在每次拖动、键盘调节、点击轨道时都触发，频率高但可控 - 避免在 handler 里直接操作 DOM 文本；用
textContent而非innerHTML防 XSS - 如果要同步更新隐藏的
output元素（如<output for="rating"></output>），记得手动赋值：outputEl.value = inputEl.value
移动端 touch 事件干扰导致拖动卡顿，需禁用 touch-action: none
在 iOS Safari 或部分安卓浏览器中，自定义滑块常出现拖动延迟、跳变甚至失效，根源是浏览器默认对 touch 区域启用了双指缩放或滚动拦截。
- 给滑块容器或
input元素加style="touch-action: manipulation;"（推荐）或touch-action: none（慎用，会禁用所有手势） - 避免在外层 wrapper 上绑定
touchstart等事件，否则可能劫持原生滑块的 touch 流程 - 真机测试时重点检查快速拖动到边界（1 或 5）是否被截断——这通常意味着 CSS transform 或 overflow 隐藏了 thumb 实际位置
实际中最容易被忽略的是：滑块的 valueAsNumber 属性返回的是 number 类型，但初始未交互时读取可能是 NaN；服务端接收前务必做 Number(input.value) || 0 安全转换。
