jQuery slider with range and three different background-color

Question

I'd want to achieve something like this:

From X elements, I'd like to choose the number of 'OK', the number or 'partially OK' and the number of 'not OK'. The three range are not superposable, obviously, and the sum is always X.

I tried to start from the standard jQuery UI slider, but the main background is unique, hence I cannot have the green and the red color together.

Is there any plugin that already do this? Or any idea on which is the easiest way to do with the standard jQuery plugin?

Answer 1

jQuery UI slider gives you it's values, as you can see in the demo:

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

I'd set background color of the slider to green, background color of the middle part to yellow and add a div positioned to the right of the slider with dynamically adjusted width, so that it stratches from right to left

$( "#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 */
  }
});

In the jQuery UI demo, the div would have styles like this:

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

I made a little Fiddle DEMO