Create multiple range slide handles in one slider_问答_开发者

I am trying to add multiple handles to a jQuery UI slider widget, as in 2 or 3 or more range sliders in one slider.

I have tried searching on google and found an article that shows how to modify it to have multiple handles but I need them to work as range sliders.

Is there anyway to make this work?

$("#slider-range").slider({
    range: true,
    min: 0开发者_如何学C,
    max: 1439,
    values: [540, 1020],
    animate: true,
    slide: slideTime
});

Thanks

colResizable is fine and all, but if you're looking for something a bit more modern, I wrote Elessar to fill this exact niche.

Create multiple range slide handles in one slider

Take a look at colResizable jQuery plugin. It allows you to resize table columns and also to create multiple range sliders:

This is a wrapper that extends jquery-ui slider functionality and allows to build multi-range slider http://jsfiddle.net/ladrower/BmQq4/

It is easy to use. Just pass the selector of DOM element that will contain a multi-range slider.

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

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

Please, check out the documentation and sources at GitHub https://github.com/ladrower/jquery-ui-intervals

I did edit.

You can look to http://jsfiddle.net/q5WEe/1/

I did edit line 70 to 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 : "" ) );*/

colresizable wasn't right for me, as that was geared more towards tables, I really preferred to use the jquery UI widget, slider. It looked like the source code could easily handle multiple handles, they just hadn't really built 'adding' or 'removing' handles live as a feature. So I just added to the source code of jquery UI Slider (a bit scary...I know) but works pretty well.

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();
        }
    },
   //...
 }

Then, when you want to call these functions, you do it like so

//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");
});

If you don't insist on jQuery UI, also noUiSlider has this capability and is highly customizable. It can't tell you the ranges rightaway, but you can get them easily from counting with handles, min and max like this:

//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];
 }
});

see fiddle!