jQuery 實現滑塊拖動漸變背景色：Colorful Sliders 插件應用

需求場景

頁面展示刻度滑塊，用戶拖動滑塊時，軌道背景色從灰色漸變至紅色，填充至滑塊當前位置；反向拖動則恢復。

推薦方案：Colorful Sliders 插件

原生 JS 實現需監聽 mousedown/mousemove/mouseup，計算滑塊位置百分比，動態生成 linear-gradient 背景，處理邊界、防抖、觸屏兼容等，代碼量大且易出 Bug。Colorful Sliders 封裝完善，配置簡單：

<input type="range" id="slider" min="0" max="100" value="0" />

<script src="jquery.colorful-sliders.min.js"></script>
<script>
$('#slider').colorfulSlider({
    // 自定義顏色停靠點：0% 灰，100% 紅
    colors: ['#cccccc', '#ff0000'],
    // 或多級漸變
    // colors: ['#cccccc', '#ff9900', '#ff0000'],
    orientation: 'horizontal',
    onChange: function(value) {
        console.log('當前值:', value);
    }
});
</script>

核心原理（自行實現參考）

1. 滑塊容器設置 background: linear-gradient(to right, gray var(--fill%), red 0)。
2. 拖動時更新 CSS 變量 --fill% = (value - min) / (max - min) * 100。
3. 使用 requestAnimationFrame 節流渲染，觸屏事件統一 touchmove。

進階定制

• 刻度標記：在軌道下方絕對定位生成刻度線與標籤，配合 background-size 實現動態顯示。
• 雙滑塊範圍選擇：插件支持 range: true 雙滑塊模式，背景填充中間區間。
• 主題適配：CSS 變量動態切換色系，支持暗黑模式。

使用成熟插件可將開發時間從數小時縮減至分鐘，專注業務邏輯而非底層交互細節。