CODEWITHSUNDEEP
javascriptjquery-ui-slider
Molkobain
Molkobain

Reputation: 1512

JQuery slider with fixed minimum value

I'm trying to make a slider where :

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.

Upvotes: 0

Views: 320

Answers (1)

lastr2d2
lastr2d2

Reputation: 3968

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

Upvotes: 1

Related Questions