Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery slider plugin that supports "Multiple Ranged Handles" [closed]

I have been looking for a Jquery UI slider pluging that supports mutiple ranged handles. The existing Jquery UI slider only supports one range set of values. I am looking for a slider that you can have muliple ranges. So a range with an inner range or two ranges that don't overlap.

Example:

R = handle

XX = Slider bar

= or - = Range between handles

XXR1------R1XXXR2--R2XXXXXXXXX

XXXR1----R2====R2-----R1XXXXXX

XXXR1--R2===R2----R3===R3--R1XXXX

I don't think there is a slider out there that can do this?? Just wanted to make sure before I go and write one.

like image 822
StarSignLeo Avatar asked Oct 07 '09 06:10

StarSignLeo


2 Answers

I've just released Elessar to fill this exact niche. colResizable is fine, but it's not really the right tool for the job.

like image 120
Kara Brightwell Avatar answered Nov 04 '22 11:11

Kara Brightwell


Here's how I did it.

myarr = [ 65, 80, 90 ];
$(function() {
    $( "#slider-range" ).slider({
        min: 0,
        max: 100,
        values: myarr,
        slide: function( event, ui ) {
            if ( ui.values[0] >= ui.values[1] ) {
                return false;
            }
            if ( ui.values[1] >= ui.values[2] ) {
                return false;
            }
            $(this).find(".range0").css({ "width": ui.values[0] + "%" });
            $(this).find(".range1").css({ "left": ui.values[0] + "%", "width": (ui.values[1]-ui.values[0])  + "%" }) ;
            $(this).find(".range2").css({ "left": ui.values[1] + "%", "width": (ui.values[2]-ui.values[1]) + "%" }) ;
            $(this).find(".range3").css({ "left": ui.values[2] + "%", "width": (100-ui.values[2]) + "%" }) ;
        },
        create: function(event, ui) {
                $(this).append('<div class="ui-slider-range ui-widget-header range0" style="left: 0%; width: ' + myarr[0] + '%; background: none repeat scroll 0% 0% #CF1920;"></div>');
                $(this).append('<div class="ui-slider-range ui-widget-header range1" style="left: ' + myarr[0] + '%; width: ' + (100-myarr[1]) + '%; background: none repeat scroll 0% 0% #FFE900;"></div>');
                $(this).append('<div class="ui-slider-range ui-widget-header range2" style="left: ' + myarr[1] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #26CF2D;"></div>');
                $(this).append('<div class="ui-slider-range ui-widget-header range3" style="left: ' + myarr[2] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #00BCFF;"></div>');
        }
    });
});

Im sure it can be optimized more, but this should give you the general idea

like image 39
shitburg Avatar answered Nov 04 '22 10:11

shitburg