滑块动画（进度填充 + 数值气泡实时显示）

效果演示（真实可交互）

拖动「音量」滑块：左侧轨道随拖动实时填充渐变进度，右上角气泡同步显示当前数值，按住时拇指放大、松开恢复。第二条是「档位」滑块，以 25 为步进自动吸附到最近档位，轨道下方配有 11 条刻度线。两条滑块都支持键盘方向键微调与聚焦高亮。

完整代码

HTML（原生 range input + 气泡 + 刻度线）：

<div class="sld-wrap">
  <div class="sld-head">
    <span>音量</span>
    <span class="sld-bubble">50</span>
  </div>
  <input class="sld" type="range" min="0" max="100" value="50" />
</div>

CSS（轨道渐变由 —p 变量控制，拇指拖动放大）：

.sld {
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 6px; cursor: pointer;
  background: linear-gradient(90deg, #6c8cff var(--p, 50%), #e3e8f5 var(--p, 50%));
}
.sld::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #fff; background: linear-gradient(135deg, #6c8cff, #8a5cff);
  transition: transform .2s ease;
}
.sld:active::-webkit-slider-thumb { transform: scale(1.3); }

JS（input 事件驱动 —p 与气泡文本，约 12 行）：

const bind = (input, out) => {
  const paint = () => {
    const p = ((input.value - input.min) / (input.max - input.min)) * 100;
    input.style.setProperty('--p', p + '%');   // 更新轨道填充比例
    out.textContent = input.value;             // 更新气泡数值
  };
  input.addEventListener('input', paint);
  paint();
};

轨道填充没有用额外的进度条元素：直接给 input 的背景写一段渐变，用 --p 变量控制两种颜色的分界点位置，JS 只需把当前值换算成百分比写入变量，一次 input 事件完成「轨道 + 气泡」两处更新。拇指放大用 :active 伪类配合 transform 过渡，无需监听按压状态。注意 -webkit-slider-thumb 与 -moz-range-thumb 需要分别写样式以覆盖 WebKit 与 Firefox。

参数说明

兼容性与性能

• 原生 range 输入在 Chrome、Firefox、Safari 15+、Edge 全支持；::-webkit-slider-thumb 与 ::-moz-range-thumb 双前缀已内置
• 无动画循环与轮询，只在 input 事件触发时更新两个 CSS 值，性能开销可忽略
• 保留原生键盘操作：方向键微调、Home/End 跳转两端，聚焦时有 outline 高亮
• 渐变轨道用纯 CSS 实现，无需额外 DOM 节点；气泡与刻度线都是静态元素

常见问题

Q: 轨道填充和拇指位置对不齐？ 这是 WebKit 的经典偏移问题，通常相差半个拇指宽。可给轨道加 margin: 0 11px（约拇指半径）抵消；本组件在大部分场景误差可忽略，若要求像素级对齐需按此补偿。

Q: Firefox 下拇指样式没生效？ Firefox 使用 ::-moz-range-thumb，且其宽高会被边框外扩，所以两套伪元素样式要分别写并微调尺寸（示例中 WebKit 22px、Firefox 16px 加 3px 边框，视觉一致）。

Q: 气泡想跟着拇指移动而不是固定在右上角？ 把气泡改为绝对定位，用 --p 百分比计算 left 位置，再减去半个气泡宽度即可；拖动时气泡放大、松手缩小，跟手效果更好。

Q: 能商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名。