suwak jQuery z zakresem i trzema różnymi kolorami tła - javascript, jquery, jquery-ui, jquery-ui-slider

Chciałbym osiągnąć coś takiego:

Z elementów X chciałbym wybrać liczbę "OK", liczbę lub "częściowo OK" i liczbę "nie OK". Te trzy zakresy nie są oczywiście superpozycjami, a suma jest zawsze X.

Próbowałem zacząć od standardowy suwak jQuery UI, ale główne tło jest unikalne, dlatego nie mogę mieć zielonego i czerwonego koloru razem.

Czy istnieje jakaś wtyczka, która już to robi? Lub jakiejś idei, która jest najłatwiejsza do zrobienia ze standardową wtyczką jQuery?

Odpowiedzi:

suwak jQuery UI podaje ci jego wartości, jak widać w wersji demonstracyjnej:

$( "#slider-range" ).slider({
slide: function( event, ui ) {
/* here, you can play with it */
}
});

Zmieniam kolor tła suwaka na zielony, kolor tła środkowej części na żółty i dodasz div umieszczona po prawej stronie suwaka z dynamicznie dostosowaną szerokością, tak aby zmieniała się od prawej do lewej

$( "#slider-range" ).slider({
slide: function( event, ui ) {
$("#YourDiv").css("width", ui.values[1]); /* obviously, you have to multiply the value of the slider by something to fit your design */
}
});

W demo jQuery UI div miałby takie style:

#YourDiv {
float: right;
height: 100%;
background: red;
width: 50px; /* this would be dynamic */
border-radius: 0 4px 4px 0;
}

Zrobiłem trochę Fiddle PRÓBNY