Плагин слайдера JQuery, поддерживающий "Многократные Ranged Handles",

Я искал встроенный слайдер JQuery UI, который поддерживает мультиязычные ручки. Существующий слайдер JQuery UI поддерживает только один диапазон значений. Я ищу слайдер, который может иметь несколько диапазонов. Поэтому диапазон с внутренним диапазоном или двумя диапазонами, которые не перекрываются.

Пример:

R = ручка

XX = Полоса слайдера

= или - = Диапазон между ручками

XXR1 ------ R1XXXR2 - R2XXXXXXXXX

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

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

Я не думаю, что есть слайдер, который может это сделать? Просто хотел убедиться, прежде чем я пойду и напишу.

Ответы

Ответ 1

Я только что выпустил Elessar, чтобы заполнить эту точную нишу. colResizable отлично, но это не совсем правильный инструмент для работы.

Ответ 2

Вот как я это сделал.

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

Я уверен, что его можно оптимизировать больше, но это должно дать вам общую идею