Create multiple range slide handles in one slider

Question

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 art

Answer 1

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