Как установить 3 разных цвета в jQuery UI Slider

Question

Я использую это UI Slider. Я, чтобы сделать этот слайдер с 3-х различных цветов для:

1. Цвет ручки
2. Предыдущая часть ручки
3. Следующая часть Ручка

Что-то вроде этого:

До сих пор я мог установить только цвет ручки:

Но, как я могу установить еще два разных цвета (один для предыдущей части Ручки, а другой для следующей части дескриптора, как первый скриншот)? Есть ли способ добавить два разных класса по jQuery и стиль таких классов, как:

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

? До сих пор, my result at fiddle

Answer 1

Если вы ищете решение JS, this is how I approached the problem, используя событие «слайд».

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

Answer 2

CSS-единственное решение, будет выглядеть следующим образом:

http://jsfiddle.net/qgoq6xm6/

.ui-slider .ui-slider-range:before, 
.ui-slider .ui-slider-range:after { 
    display:block; 
    height:14px; 
    content:''; 
    background:yellow; 
    right:100%; 
    top:0px; 
    left: -1000px; 
    position:absolute; 
} 

.ui-slider .ui-slider-range:after { 
    background:green; 
    left:100%; 
    right:-1000px; 
} 

.slider-container { 
    overflow:hidden; 
    padding:5px 
} 

Так в основном это добавит 1000px ширина элемента до и после DIV синего диапазона с использованием абсолютного положения. 1000px должен быть шириной вашего слайдера, в настоящее время вы используете слайдер ширины 100% в демо, поэтому я просто использовал 1000px в качестве примера.

Вам также нужно обернуть ползунок в новый div с переполнением: скрытый, поэтому он будет обрезать зеленые и желтые линии слева и справа.