size 属性对 完全无效，浏览器会忽略它；真正控制滑块轨道长度只能用 css 的 width 和 height。
size 属性对 <input type="range"> 完全无效
直接说结论：size 是表单控件（如 <input type="text"> 或 <textarea></textarea>）用于控制**可见字符宽度**的属性，但对 <input type="range"> 没有任何效果——浏览器会忽略它。
常见错误现象是：写了 <input type="range" size="200">，结果滑块长度毫无变化，甚至开发者工具里都看不到该属性被应用。
原因很简单：size 不在 HTML 规范中定义为 range 输入的有效属性。W3C 明确只支持 min、max、step、value 等语义化属性，不包括尺寸控制。
真正控制滑块轨道长度只能靠 CSS
要调整 <input type="range"> 的视觉长度（即轨道总长），唯一可靠方式是用 CSS 设置 width（或 max-width）：
<input type="range" id="volume" style="width: 300px;">
注意点：
-
width作用于整个输入元素（含轨道和滑块），不是仅轨道；滑块大小默认由 UA 样式决定，不会随width等比缩放 - 若需响应式，优先用
width: 100%配合父容器约束，而非固定像素值 - 某些旧版 Safari 对
width支持不稳定，建议加appearance: none并重置所有样式以确保可控性
自定义轨道长度时容易踩的坑
光设 width 常不够，尤其想精确匹配设计稿或适配移动端时：
- 不同浏览器默认轨道高度/滑块尺寸差异大（Chrome 轨道细、Firefox 略粗），仅改
width会导致比例失调 - 用
transform: scale()拉伸会模糊滑块，且拖动热区不随视觉同步缩放，造成点击偏移 - 设置
width后未重置margin或padding，导致父容器溢出或对齐错位 - 在 flex 布局中忘记设
flex-shrink: 0，导致小屏下被压缩到无法拖动
推荐最小可行样式组合
兼顾兼容性与可控性，以下 CSS 片段可直接复用：
input[type="range"] {
width: 100%;
height: 6px;
-webkit-appearance: none;
background: #e0e0e0;
border-radius: 3px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #333;
border-radius: 50%;
cursor: pointer;
}
关键点在于：-webkit-appearance: none 是跨浏览器定制的前提；height 控制轨道粗细（影响视觉长度感知）；width 才真正决定轨道横向延展范围。这两者配合，才能稳定控制“看起来多长”。
别试 size，它不在 range 的游戏规则里。真要调长度，CSS 的 width 和 height 是唯二入场券，其他都是干扰项。
