Fix slider orientation change, value-handle-offset bug

IPython/html/static/notebook/js/widgets/float_range.js

@@ -31,7 +31,7 require(["notebook/js/widget"], function(){
         //          Frontent -> Frontend Sync
         update : function(){
             // Slider related keys.
-            var _keys = ['value', 'step', 'max', 'min', 'disabled', 'orientation'];
+            var _keys = ['step', 'max', 'min', 'disabled'];
             for (var index in _keys) {
                 var key = _keys[index];
                 if (this.model.get(key) != undefined) {
@@ -39,7 +39,22 require(["notebook/js/widget"], function(){
                 }
             }
 
+            // WORKAROUND FOR JQUERY SLIDER BUG.
+            // The horizontal position of the slider handle
+            // depends on the value of the slider at the time
+            // of orientation change.  Before applying the new
+            // workaround, we set the value to the minimum to
+            // make sure that the horizontal placement of the
+            // handle in the vertical slider is always 
+            // consistent.
             var orientation = this.model.get('orientation');
+            var value = this.model.get('min');
+            this.$slider.slider('option', 'value', value);
+            this.$slider.slider('option', 'orientation', orientation);
+            var value = this.model.get('value');
+            this.$slider.slider('option', 'value', value);
+
+            // Use the right CSS classes for vertical & horizontal sliders
             if (orientation=='vertical') {
                 this.$slider_container
                     .removeClass('widget-hslider')

IPython/html/static/notebook/less/widgetarea.less

@@ -45,7 +45,7
                     width: 14px !important;
                     height: 28px !important;
 
-                    margin-top: -7px !important;
+                    margin-top: -8px !important;
                 }
             }
         }
@@ -69,7 +69,7
                 .ui-slider-handle {
                     width: 28px !important;
                     height: 14px !important;
-                    margin-left: -15px;
+                    margin-left: -9px;
                 }
             }
         }

IPython/html/static/style/ipython.min.css

@@ -167,7 +167,7 h1:hover .anchor-link,h2:hover .anchor-link,h3:hover .anchor-link,h4:hover .anch
 .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
 .widget-area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}.widget-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;}
 .widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;}
-.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;}
+.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;height:250px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;margin-top:5px;height:100%;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;}
 .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;}
 .widget-area .widget-subarea .widget-numeric-text{width:150px;}
 .widget-area .widget-subarea .widget-progress{width:363px;}.widget-area .widget-subarea .widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}

IPython/html/static/style/style.min.css

@@ -1586,7 +1586,7 span#checkpoint_status,span#autosave_status{font-size:small;}
 .pretooltiparrow:before{background-color:#f7f7f7;border:1px #ababab solid;z-index:11;content:"";position:absolute;left:15px;top:10px;width:25px;height:25px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
 .widget-area{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;}.widget-area .widget-subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}.widget-area .widget-subarea .widget-label{min-width:10ex;padding-right:8px;text-align:right;vertical-align:text-top;padding-top:3px;}
 .widget-area .widget-subarea .widget-hslider{padding-left:8px;padding-right:5px;margin-top:11px;width:348px;height:5px !important;overflow:visible !important;border:1px solid #CCCCCC;background:#FFFFFF;border-radius:4px;}.widget-area .widget-subarea .widget-hslider .ui-slider{border:0px !important;background:none !important;}.widget-area .widget-subarea .widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-7px !important;}
-.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;height:100%;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;height:100%;margin-top:5px;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;}
+.widget-area .widget-subarea .widget-vslider{border:1px solid #CCCCCC;background:#FFFFFF;width:5px;margin-left:12px;padding-bottom:14px;border-radius:4px;height:250px;}.widget-area .widget-subarea .widget-vslider .ui-slider{border:0px !important;background:none !important;margin-left:-4px;margin-top:5px;height:100%;}.widget-area .widget-subarea .widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-15px;}
 .widget-area .widget-subarea .widget-text{width:350px;margin-bottom:0px;}
 .widget-area .widget-subarea .widget-numeric-text{width:150px;}
 .widget-area .widget-subarea .widget-progress{width:363px;}.widget-area .widget-subarea .widget-progress .bar{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}