Merge pull request #4982 from ellisonbg/slider-readout

Live readout for slider widgets

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

@@ -25,17 +25,22 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
                 .appendTo(this.$el)
                 .addClass('widget-hlabel')
                 .hide();
+            
             this.$slider = $('<div />')
                 .slider({})
                 .addClass('slider');
-            
             // Put the slider in a container 
             this.$slider_container = $('<div />')
                 .addClass('widget-hslider')
-                .append(this.$slider);
+                .append(this.$slider)
             this.$el_to_style = this.$slider_container; // Set default element to style
             this.$el.append(this.$slider_container);
             
+            this.$readout = $('<div/>')
+                .appendTo(this.$el)
+                .addClass('widget-hreadout')
+                .hide();
+            
             // Set defaults.
             this.update();
         },
@@ -71,6 +76,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
                 this.$slider.slider('option', 'orientation', orientation);
                 value = this.model.get('value');
                 this.$slider.slider('option', 'value', value);
+                this.$readout.text(value);
 
                 // Use the right CSS classes for vertical & horizontal sliders
                 if (orientation=='vertical') {
@@ -83,6 +89,9 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
                     this.$label
                         .removeClass('widget-hlabel')
                         .addClass('widget-vlabel');
+                    this.$readout
+                        .removeClass('widget-hreadout')
+                        .addClass('widget-vreadout');
 
                 } else {
                     this.$slider_container
@@ -94,6 +103,9 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
                     this.$label
                         .removeClass('widget-vlabel')
                         .addClass('widget-hlabel');
+                    this.$readout
+                        .removeClass('widget-vreadout')
+                        .addClass('widget-hreadout');
                 }
 
                 var description = this.model.get('description');
@@ -103,6 +115,13 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
                     this.$label.text(description);
                     this.$label.show();
                 }
+                
+                var readout = this.model.get('readout');
+                if (readout) {
+                    this.$readout.show();
+                } else {
+                    this.$readout.hide();
+                }
             }
             return IntSliderView.__super__.update.apply(this);
         },
@@ -117,7 +136,9 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
-            this.model.set('value', this._validate_slide_value(ui.value), {updated_view: this});
+            var actual_value = this._validate_slide_value(ui.value);
+            this.model.set('value', actual_value, {updated_view: this});
+            this.$readout.text(actual_value);
             this.touch();
         },
 

IPython/html/static/notebook/less/widgets.less

@@ -46,6 +46,20 @@
     vertical-align : text-bottom;
 }
 
+.widget-hreadout {
+    padding-left   : 8px;
+    padding-top    : 3px;
+    text-align     : left;
+    vertical-align : text-top;
+}
+
+.widget-vreadout {
+    /* Vertical Label */
+    padding-top : 5px;
+    text-align     : center;
+    vertical-align : text-top;
+}
+
 .slide-track {
     /* Slider Track */
     border     : 1px solid #CCCCCC;

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

@@ -167,6 +167,8 @@ div.cell.text_cell.rendered{padding:0}
 .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:.44em .4em .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-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
 .widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom}
+.widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top}
+.widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top}
 .slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;}
 .widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;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-hslider .ui-slider{border:0 !important;background:none !important;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;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
 .widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;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%}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;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:1;-moz-box-flex:1;box-flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px}

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

@@ -1381,6 +1381,8 @@ div.cell.text_cell.rendered{padding:0}
 .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:.44em .4em .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-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
 .widget-vlabel{padding-bottom:5px;text-align:center;vertical-align:text-bottom}
+.widget-hreadout{padding-left:8px;padding-top:3px;text-align:left;vertical-align:text-top}
+.widget-vreadout{padding-top:5px;text-align:center;vertical-align:text-top}
 .slide-track{border:1px solid #ccc;background:#fff;border-radius:4px;}
 .widget-hslider{padding-left:8px;padding-right:5px;overflow:visible;width:348px;height:5px;max-height:5px;margin-top:11px;border:1px solid #ccc;background:#fff;border-radius:4px;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-hslider .ui-slider{border:0 !important;background:none !important;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;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1}.widget-hslider .ui-slider .ui-slider-handle{width:14px !important;height:28px !important;margin-top:-8px !important}
 .widget-vslider{padding-bottom:8px;overflow:visible;width:5px;max-width:5px;height:250px;margin-left:12px;border:1px solid #ccc;background:#fff;border-radius:4px;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%}.widget-vslider .ui-slider{border:0 !important;background:none !important;margin-left:-4px;margin-top:5px;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:1;-moz-box-flex:1;box-flex:1}.widget-vslider .ui-slider .ui-slider-handle{width:28px !important;height:14px !important;margin-left:-9px}

IPython/html/widgets/widget_float.py

@@ -53,6 +53,7 @@ class FloatSliderWidget(_BoundedFloatWidget):
     _view_name = Unicode('FloatSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
+    readout = Bool(False, help="Display the current value of the slider next to it.", sync=True)
 
 
 class FloatProgressWidget(_BoundedFloatWidget):

IPython/html/widgets/widget_int.py

@@ -53,6 +53,7 @@ class IntSliderWidget(_BoundedIntWidget):
     _view_name = Unicode('IntSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
+    readout = Bool(False, help="Display the current value of the slider next to it.", sync=True)
 
 
 class IntProgressWidget(_BoundedIntWidget):