Slider: add handles in single DOM operation. Fixed #7259 - optimize handle creation.

(cherry picked from commit 7fb6ca146e06b6e750f799937264a38a54ceaa64)

diff --git a/ui/jquery.ui.slider.js b/ui/jquery.ui.slider.js
index a32e7796699e2e57212d0a8e2f13557e588e8b56..ea93c3e1cb3425b80c6274a49d8f1ff6147bb544 100644 (file)
--- a/ui/jquery.ui.slider.js
+++ b/ui/jquery.ui.slider.js
@@ -36,7 +36,11 @@ $.widget( "ui.slider", $.ui.mouse, {
 
        _create: function() {
                var self = this,
-                       o = this.options;
+                       o = this.options,
+                       existingHandles = this.element.find( ".ui-slider-handle" ).addClass( "ui-state-default ui-corner-all" ),
+                       handle = "<a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>",
+                       handleCount = ( o.values && o.values.length ) || 1,
+                       handles = [];
 
                this._keySliding = false;
                this._mouseSliding = false;
@@ -50,57 +54,35 @@ $.widget( "ui.slider", $.ui.mouse, {
                                " ui-slider-" + this.orientation +
                                " ui-widget" +
                                " ui-widget-content" +
-                               " ui-corner-all" );
-               
-               if ( o.disabled ) {
-                       this.element.addClass( "ui-slider-disabled ui-disabled" );
-               }
+                               " ui-corner-all" +
+                               ( o.disabled ? " ui-slider-disabled ui-disabled" : "" ) );
 
                this.range = $([]);
 
                if ( o.range ) {
                        if ( o.range === true ) {
-                               this.range = $( "<div></div>" );
                                if ( !o.values ) {
                                        o.values = [ this._valueMin(), this._valueMin() ];
                                }
                                if ( o.values.length && o.values.length !== 2 ) {
                                        o.values = [ o.values[0], o.values[0] ];
                                }
-                       } else {
-                               this.range = $( "<div></div>" );
-                       }
-
-                       this.range
-                               .appendTo( this.element )
-                               .addClass( "ui-slider-range" );
-
-                       if ( o.range === "min" || o.range === "max" ) {
-                               this.range.addClass( "ui-slider-range-" + o.range );
                        }
 
-                       // note: this isn't the most fittingly semantic framework class for this element,
-                       // but worked best visually with a variety of themes
-                       this.range.addClass( "ui-widget-header" );
-               }
-
-               if ( $( ".ui-slider-handle", this.element ).length === 0 ) {
-                       $( "<a href='#'></a>" )
+                       this.range = $( "<div></div>" )
                                .appendTo( this.element )
-                               .addClass( "ui-slider-handle" );
+                               .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 : "" ) );
                }
 
-               if ( o.values && o.values.length ) {
-                       while ( $(".ui-slider-handle", this.element).length < o.values.length ) {
-                               $( "<a href='#'></a>" )
-                                       .appendTo( this.element )
-                                       .addClass( "ui-slider-handle" );
-                       }
+               for ( var i = existingHandles.length; i < handleCount; i += 1 ) {
+                       handles.push( handle );
                }
 
-               this.handles = $( ".ui-slider-handle", this.element )
-                       .addClass( "ui-state-default" +
-                               " ui-corner-all" );
+               this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( self.element ) );
 
                this.handle = this.handles.eq( 0 );