如何在 jQuery UI Slider 设置 3 种不同的颜色

我正在用这个用户界面滑块。我必须用 3 种不同的颜色来制作这个滑块：

1. 手柄颜色
2. 句柄的前一部分
3. 句柄的下一部分

Something like this:

到目前为止，我只能设置手柄颜色：

但是，如何设置另外两种不同的颜色（一个用于手柄的前一部分，另一个用于手柄的下一部分，如第一个屏幕截图）？有没有办法通过 jQuery 添加两个不同的类并设置这些类的样式，例如：

.handle-previous-slider {
  background: yellow;
}
.handle-next-slider {
  background: green;
}

？迄今为止，我在小提琴上的结果

如果您正在寻找 JS 解决方案，这就是我解决问题的方法，使用“幻灯片”事件。

slide: function (event, ui) {
    var totalWidth = $(".slider").width();
    $(".left-color").width((ui.values[0]) / 100 * totalWidth);
},