Создание нескольких слайдовых слайдов в одном слайдере

Я пытаюсь добавить несколько дескрипторов в виджет слайдера jQuery UI, как в 2 или 3 или более ползунах диапазона в одном слайдере.

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

Есть ли способ выполнить эту работу?

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 1439,
    values: [540, 1020],
    animate: true,
    slide: slideTime
});

Спасибо

Ответ 1

Взгляните на colResizable jQuery плагин. Он позволяет изменять размер столбцов таблицы, а также создавать слайдеры с несколькими диапазонами:

Ответ 2

colResizable отлично и все, но если вы ищете что-то более современное, я написал Elessar, чтобы заполнить этот точный ниша.

Ответ 3

Это оболочка, расширяющая функциональность jquery-ui slider и позволяющая создавать слайдер с несколькими диапазонами http://jsfiddle.net/ladrower/BmQq4/

Он прост в использовании. Просто передайте селектор элемента DOM, который будет содержать многодиапазонный слайдер.

<html>
    <div id="slider"></div>
</html>

<script>
    var intervals = new Intervals("#slider");
</script>

Пожалуйста, ознакомьтесь с документацией и источниками в GitHub https://github.com/ladrower/jquery-ui-intervals

Ответ 4

Я редактировал.

Вы можете посмотреть http://jsfiddle.net/q5WEe/1/

Я редактировал строки с 70 по 82.

            /*edit
            if ( o.values.length && o.values.length !== 2 ) {
                o.values = [ o.values[0], o.values[0] ];
            }*/
        }
        /*edit
        this.range = $( "<div></div>" )
            .appendTo( this.element )
            .addClass( "ui-slider-range" +
            // note: this isn't the most fittingly semantic framework class for this element,
            // but worked best visually with a variety of themes
            " ui-widget-header" +
            ( ( o.range === "min" || o.range === "max" ) ? " ui-slider-range-" + o.range : "" ) );*/

Ответ 5

colresizable не подходит для меня, поскольку это было больше ориентировано на таблицы, я действительно предпочел использовать виджет jquery UI, слайдер. Похоже, что исходный код может легко обрабатывать несколько дескрипторов, они просто не создали "добавление" или "удаление" ручек в качестве функции. Поэтому я просто добавил к исходному коду jquery UI Slider (немного страшно... я знаю), но работает очень хорошо.

var slider = $.widget("ui.slider", $.ui.mouse, {
    version: "1.11.4",
    widgetEventPrefix: "slide",
    //...
    value: function(newValue) {
        // ...
    },

    values: function(index, newValue) {
        // ...
    },

    //new function to allow creation of handles
    //you can add your own code to handle arguments or something for placing
    //the new handle in a specific spot
    addHandle: function() {
            //adds a new handle 
            this.options.values.push(this._trimAlignValue((this._valueMax() - this._valueMin()) / 2));
            this._refresh();
    },

    //new function to allow deleting handles
    //currently just takes the last value off, but you can make it fancier
    removeHandle: function() {
        //only remove a handle if there are more than 1 handles 
        if (this.options.values.length > 1) {
            this.options.values.pop();
            this._refresh();
        }
    },
   //...
 }

Затем, когда вы хотите вызвать эти функции, вы делаете это так:

//when your 'add handle' button is clicked
$("#btn-add").click(function(){ 
    //call the add handle function you made within the slider widget
    $( "#slider" ).slider("addHandle"); 
});

$("#btn-remove").click(function(){
    $( "#slider" ).slider("removeHandle");
});

Ответ 6

Если вы не настаиваете на пользовательском интерфейсе jQuery, также noUiSlider имеет эту возможность и настраивается. Он не может рассказать вам диапазоны прямо сейчас, но вы можете легко получить их от подсчета с помощью ручек, min и max, как это:

//get array of connect elements (ranges)
var connect = multirange.querySelectorAll('.noUi-connect');

multirange.noUiSlider.on('update', function () {
 var valuesarr = multirange.noUiSlider.get(),
 max = multirange.noUiSlider.options.range.max[0],
 oldsum = multirange.noUiSlider.options.range.min[0];// = slider min, will be usually 0

 for ( var i = 0; i < connect.length; i++ ) {
     if(valuesarr[i]) $(connect[i]).text(valuesarr[i] - oldsum);
     else $(connect[i]).text(max - oldsum);
     oldsum=valuesarr[i];
 }
});

см. скрипку!