Adding initial version of readout to sliders.

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-hlabel')
+                .hide();
+            
             // Set defaults.
             this.update();
         },
@@ -103,6 +108,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 +129,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/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):