CODEWITHSUNDEEP
jqueryjquery-ui
Tom
Tom

Reputation: 9643

jQuery multuple linked sliders?

I'm trying to find an example of multiple linked sliders similar to estately's mortgage calculator (can be found on the right bottom of that page).

I've found this example but the sliders aren't linked. Does anyone have a good example i can use?

Upvotes: 0

Views: 1626

Answers (2)

Brad Christie
Brad Christie

Reputation: 101594

I think you're looking to bind to one slider's "slide" event, then using whatever variables you need to calculate and set the value of your associated one(s)

edit
here's a working example: http://www.jsfiddle.net/sNfBM/

using a rudimentary:

    // make another slide change
    $('#master').bind('slide',function(){
        var pct = $('#master').slider('option', 'value') / $('#master').slider('option', 'max');
        $('#eq > span').each(function(i,e){
            var ppct = parseInt($(this).slider('option','max') * pct);
            $(this).slider('option', 'value', ppct);
        });
    });

Upvotes: 1

Frederik Kammer
Frederik Kammer

Reputation: 3177

I think you don't need a tutorial :D It's pretty easy.

Everytime a slider get moved, you update the other sliders.

Use the slide or change event and update the other sliders.

For example:

$( "#slider1" ).bind( "slide", function(event, ui) {
    $("#slider2").slider({ value: 45 });
    $("#slider3").slider({ value: 30 });
});

Just add a slide event for each slider and there you go

Upvotes: 1

Related Questions