jquery - bootstrap - slider js

Complemento deslizante de Jquery que admite "Varios controladores a distancia"

Question

He estado buscando un plugin deslizante Jquery UI que admita varios manejadores de rango. El control deslizante existente de Jquery UI solo admite un conjunto de valores de rango. Estoy buscando un control deslizante que puede tener rangos múltiples. Entonces, un rango con un rango interno o dos rangos que no se superponen.

Ejemplo:

R = mango

XX = barra deslizadora

= or - = Rango entre mangos

XXR1 ------ R1XXXR2 - R2XXXXXXXXX

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

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

No creo que haya un control deslizante que pueda hacer esto? Solo quería asegurarme antes de ir y escribir uno.

Answer 1

Así es como lo hice.

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>'');
        }
    });
});

Estoy seguro de que se puede optimizar más, pero esto debería darte la idea general

Answer 2

Acabo de lanzar Elessar para llenar este nicho exacto. colResizable está bien, pero no es realmente la herramienta adecuada para el trabajo.