Add initial implementation of 2-handle range sliders for integers.

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

@@ -53,7 +53,7 b' define(["widgets/js/widget"], function(WidgetManager){'
             if (options === undefined || options.updated_view != this) {
                 // JQuery slider option keys.  These keys happen to have a
                 // one-to-one mapping with the corrosponding keys of the model.
-                var jquery_slider_keys = ['step', 'max', 'min', 'disabled'];
+                var jquery_slider_keys = ['step', 'max', 'min', 'disabled', 'range'];
                 var that = this;
                 _.each(jquery_slider_keys, function(key, i) {
                     var model_value = that.model.get(key);
@@ -72,11 +72,21 b' define(["widgets/js/widget"], function(WidgetManager){'
                 // consistent.
                 var orientation = this.model.get('orientation');
                 var value = this.model.get('min');
+                if (this.model.get('range')) {
+                    this.$slider.slider('option', 'values', [value, value]);
+                } else {
                 this.$slider.slider('option', 'value', value);
+                }
                 this.$slider.slider('option', 'orientation', orientation);
                 value = this.model.get('value');
+                if (this.model.get('range')) {
+                    this.$slider.slider('option', 'values', value);
+                    this.$readout.text(value.join("-"));
+                } else {
                 this.$slider.slider('option', 'value', value);
                 this.$readout.text(value);
+                }
+
 
                 // Use the right CSS classes for vertical & horizontal sliders
                 if (orientation=='vertical') {
@@ -137,10 +147,16 b' define(["widgets/js/widget"], function(WidgetManager){'
 
             // Calling model.set will trigger all of the other views of the 
             // model to update.
+            if (this.model.get("range")) {
+                var actual_value = ui.values.map(this._validate_slide_value);
+                this.$readout.text(actual_value.join("-"));
+            } else {
             var actual_value = this._validate_slide_value(ui.value);
-            this.model.set('value', actual_value, {updated_view: this});
             this.$readout.text(actual_value);
+            }
+            this.model.set('value', actual_value, {updated_view: this});
             this.touch();
+
         },
 
         _validate_slide_value: function(x) {

IPython/html/widgets/__init__.py

@@ -5,7 +5,7 b' from .widget_button import ButtonWidget'
 from .widget_container import ContainerWidget, PopupWidget
 from .widget_float import FloatTextWidget, BoundedFloatTextWidget, FloatSliderWidget, FloatProgressWidget
 from .widget_image import ImageWidget
-from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget
+from .widget_int import IntTextWidget, BoundedIntTextWidget, IntSliderWidget, IntProgressWidget, IntRangeSliderWidget
 from .widget_selection import RadioButtonsWidget, ToggleButtonsWidget, DropdownWidget, SelectWidget
 from .widget_selectioncontainer import TabWidget, AccordionWidget
 from .widget_string import HTMLWidget, LatexWidget, TextWidget, TextareaWidget

IPython/html/widgets/interaction.py

@@ -23,7 +23,7 b' from inspect import getcallargs'
 from IPython.core.getipython import get_ipython
 from IPython.html.widgets import (Widget, TextWidget,
     FloatSliderWidget, IntSliderWidget, CheckboxWidget, DropdownWidget,
-    ContainerWidget, DOMWidget)
+    ContainerWidget, DOMWidget, IntRangeSliderWidget)
 from IPython.display import display, clear_output
 from IPython.utils.py3compat import string_types, unicode_type
 from IPython.utils.traitlets import HasTraits, Any, Unicode
@@ -107,6 +107,15 b' def _widget_abbrev(o):'
             else:
                 cls = FloatSliderWidget
             return cls(value=value, min=min, max=max, step=step)
+        elif _matches(o, [float_or_int]*4):
+            min, low, high, max = o
+            if not min <= low <= high <= max:
+                raise ValueError("Range input expects min <= low <= high <= max, got %r" % o)
+            if all(isinstance(_, int) for _ in o):
+                cls = IntRangeSliderWidget
+            else:
+                cls = FloatRangeSliderWidget
+            return cls(value=(low, high), min=min, max=max)
     else:
         return _widget_abbrev_single_value(o)
 

IPython/html/widgets/widget_int.py

@@ -14,7 +14,7 b' Represents an unbounded int using a widget.'
 # Imports
 #-----------------------------------------------------------------------------
 from .widget import DOMWidget
-from IPython.utils.traitlets import Unicode, CInt, Bool, Enum
+from IPython.utils.traitlets import Unicode, CInt, Bool, Enum, Tuple
 
 #-----------------------------------------------------------------------------
 # Classes
@@ -53,8 +53,38 b' class IntSliderWidget(_BoundedIntWidget):'
     _view_name = Unicode('IntSliderView', sync=True)
     orientation = Enum([u'horizontal', u'vertical'], u'horizontal', 
         help="Vertical or horizontal.", sync=True)
+    range = Bool(False, help="Display a range selector", sync=True)
     readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)
 
 
 class IntProgressWidget(_BoundedIntWidget):
     _view_name = Unicode('ProgressView', sync=True)
+
+class _IntRangeWidget(_IntWidget):
+    value = Tuple(CInt, CInt, default_value=(0, 1), help="Low and high int values", sync=True)
+
+class _BoundedIntRangeWidget(_IntRangeWidget):
+    step = CInt(1, help="Minimum step that the value can take (ignored by some views)", sync=True)
+    max = CInt(100, help="Max value", sync=True)
+    min = CInt(0, help="Min value", sync=True)
+
+    def __init__(self, *pargs, **kwargs):
+        """Constructor"""
+        DOMWidget.__init__(self, *pargs, **kwargs)
+        self.on_trait_change(self._validate, ['value', 'min', 'max'])
+
+    def _validate(self, name, old, new):
+        """Validate min <= low <= high <= max"""
+        if name == "value":
+            low, high = new
+            low = max(low, self.min)
+            high = min(high, self.max)
+            self.value = (min(low, high), max(low, high))
+
+
+class IntRangeSliderWidget(_BoundedIntRangeWidget):
+    _view_name = Unicode('IntSliderView', sync=True)
+    orientation = Enum([u'horizontal', u'vertical'], u'horizontal',
+        help="Vertical or horizontal.", sync=True)
+    range = Bool(True, help="Display a range selector", sync=True)
+    readout = Bool(True, help="Display the current value of the slider next to it.", sync=True)