JQuery UI Slider - Change Background Color ONLY Between Handlers/sliders/markers

I am using jQuery UI Slider. I have multiple hanldes with range set to false. Is there a way to color the range between two handles/sliders/markers whatever you want to call them?

Solution 1:

You can add div inside your slider and resize them when you move the handles. With proper css it'll give the effect you're describing. You may need to tweak it a little bit, but this should give you some ideas:

HTML

//You add divs inside your slider, you need four, the last region will be 
/background of slider
<div class="pct-slider" id="mondaySlider">
     <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>  
</div>

CSS

 //Make your divs relative and give them color    
.color-region
    {
        position: relative;
        height: 100%;
        float: left;
    }

.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(1)
{
    background-color: blue;
}
.color-region:nth-child(2)
{
    background-color: red;
}
.color-region:nth-child(3)
{
    background-color: yellow;
}
.color-region:nth-child(4)
{
    background-color: green;
}

JS

function resize_colors() {
       //you start at 0 
       var cur_pos = 0;
        $(".ui-slider-handle").each(function (i) {
            //for each handle you check position and set width of corresponding color div
            $('.color-region').eq(i).css('width', $(this).position().left - cur_pos)
          //update cur_pos to calculate next color width  
          cur_pos = $(this).position().left;
        })
    }

You'll see it doesn't follow completely on slide event, part of this is because slide event is triggered when it moves only, so when you stop, there's a moment not updating. But maybe if you run resize color on some other event it will give a better result.

See fiddle:http://jsfiddle.net/t4veqohy/1/