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

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 = $( "
" )
            .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 : "" ) );*/