JQuery slider with fixed minimum value

Question

I'm trying to make a slider where :

• the min/max values are 0/100% (That I can do)
• it has a fixed first value that cannot be change and is filled with a color (Let say 30% for the example)
• it has an handler to complete the previous value (eg: From 30% to 100%) and will be filled with another color.

Here is that it should look like. '=' is the fixed first value, '-' is what we add, '_' is what remains :

[===|_____] A first

[===------|_] When we move the handler

I tried to make it with a range slider, hiding the first handler but I had a problem with the color thing. All I did was putting a color to the entire background, which is not my goal.

Answer 1

Create a div with background-color for each handler and append them to slider.

$(document).ready(function () {
var minFixedValue = 10;
var maxValue = 30;
var updateEvent = function (event, ui) {

    if (ui != undefined) {
        var index = $(ui.handle).index();
        if (index === 1) return false;
    }

    $('#slide1 .slide-back').remove();
    var backgrouldColorSettings = ['blue', 'grey']
    $($('#slide1 a').get().reverse()).each(function (i) {
        $('#slide1').append(
        $('<div></div>').addClass('slide-back')
            .width($(this).offset().left - 5)
            .css('background', backgrouldColorSettings[i]));
    });
};
$('#slide1').slider({
    range: true,
    slide: updateEvent,
    change: updateEvent,
    values: [minFixedValue, maxValue]
});

updateEvent();
});

See jsFilddler here