jquerycssjquery-ui-slider

How to set 3 different colors at jQuery UI Slider

I'm using this UI Slider. I've to make this slider with 3 different colors for:

  1. Handle Color
  2. Previous portion of Handle
  3. Next portion of Handle

Something like this:

So far, I'm able to put handle color only:

But, How can I set two more different color (one is for previous portion of Handle and another is for next portion of handle like the first screenshot)? Is there any way adding two different classes by jQuery and style those classes like: 

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

? So far, my result at fiddle

Solution

  • If you're looking for a JS solution, this is how I approached the problem, using the "slide" event.

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