Add dragging behaviour properties to sliders

docs/source/examples/Output Widget.ipynb

@@ -350,7 +350,7 @@
     "\n",
     "This always prints in the currently active cell, not the cell that started the background thread.\n",
     "\n",
-    "This can lead to surprising behaviour in output widgets. During the time in which output is captured by the output widget, *any* output generated in the notebook, regardless of thread, will go into the output widget.\n",
+    "This can lead to surprising behavior in output widgets. During the time in which output is captured by the output widget, *any* output generated in the notebook, regardless of thread, will go into the output widget.\n",
     "\n",
     "The best way to avoid surprises is to *never* use an output widget's context manager in a context where multiple threads generate output. Instead, we can pass an output widget to the function executing in a thread, and use `append_display_data()`, `append_stdout()`, or `append_stderr()` methods to append displayable output to the output widget."
    ]

docs/source/examples/Widget Styling.ipynb

@@ -336,7 +336,7 @@
     "\n",
     "#### align-items\n",
     "\n",
-    "`align-items` can be one of `flex-start`, `flex-end`, `center`, `baseline`, `stretch`. This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).\n",
+    "`align-items` can be one of `flex-start`, `flex-end`, `center`, `baseline`, `stretch`. This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).\n",
     "   ![Items](./images/align-items.svg)\n",
     "   \n",
     "#### align-content\n",

ipywidgets/widgets/widget_float.py

@@ -159,6 +159,8 @@ class FloatSlider(_BoundedFloat):
         default is 'horizontal', orientation of the slider
     readout : {True, False}
         default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
     readout_format : str
         default is '.2f', specifier for the format function used to represent
         slider value for human consumption, modeled after Python 3's format
@@ -174,8 +176,9 @@ class FloatSlider(_BoundedFloat):
         '.2f', help="Format for the readout").tag(sync=True)
     continuous_update = Bool(True, help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
 
 @register
@@ -200,6 +203,8 @@ class FloatLogSlider(_BoundedLogFloat):
         default is 'horizontal', orientation of the slider
     readout : {True, False}
         default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
     readout_format : str
         default is '.3g', specifier for the format function used to represent
         slider value for human consumption, modeled after Python 3's format
@@ -216,8 +221,9 @@ class FloatLogSlider(_BoundedLogFloat):
     continuous_update = Bool(True, help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
     base = CFloat(10., help="Base for the logarithm").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
 
 @register
@@ -343,6 +349,8 @@ class FloatRangeSlider(_BoundedFloatRange):
         default is 'horizontal'
     readout : {True, False}
         default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
     readout_format : str
         default is '.2f', specifier for the format function used to represent
         slider value for human consumption, modeled after Python 3's format
@@ -358,5 +366,6 @@ class FloatRangeSlider(_BoundedFloatRange):
         '.2f', help="Format for the readout").tag(sync=True)
     continuous_update = Bool(True, help="Update the value of the widget as the user is sliding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)

ipywidgets/widgets/widget_int.py

@@ -34,6 +34,8 @@
     The upper limit for the value.
 step: integer
     The step between allowed values.
+behavior : str
+    slider handle and connector dragging behavior. Default is 'drag-tap'.
 """
 
 def _int_doc(cls):
@@ -165,8 +167,9 @@ class IntSlider(_BoundedInt):
         'd', help="Format for the readout").tag(sync=True)
     continuous_update = Bool(True, help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
-
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
 
 @register
@@ -289,6 +292,20 @@ class IntRangeSlider(_BoundedIntRange):
         The lowest allowed value for `lower`
     max : int
         The highest allowed value for `upper`
+    step : int
+        step of the trackbar
+    description : str
+        name of the slider
+    orientation : {'horizontal', 'vertical'}
+        default is 'horizontal'
+    readout : {True, False}
+        default is True, display the current value of the slider next to it
+    behavior : str
+        slider handle and connector dragging behavior. Default is 'drag-tap'.
+    readout_format : str
+        default is '.2f', specifier for the format function used to represent
+        slider value for human consumption, modeled after Python 3's format
+        specification mini-language (PEP 3101).
     """
     _view_name = Unicode('IntRangeSliderView').tag(sync=True)
     _model_name = Unicode('IntRangeSliderModel').tag(sync=True)
@@ -301,3 +318,5 @@ class IntRangeSlider(_BoundedIntRange):
     continuous_update = Bool(True, help="Update the value of the widget as the user is sliding the slider.").tag(sync=True)
     style = InstanceDict(SliderStyle, help="Slider style customizations.").tag(sync=True, **widget_serialization)
     disabled = Bool(False, help="Enable or disable user changes").tag(sync=True)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)

ipywidgets/widgets/widget_selection.py

@@ -573,6 +573,8 @@ class SelectionSlider(_SelectionNonempty):
         help="Display the current selected label next to the slider").tag(sync=True)
     continuous_update = Bool(True,
         help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)
 
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
 
@@ -627,3 +629,5 @@ def _validate_index(self, proposal):
         help="Update the value of the widget as the user is holding the slider.").tag(sync=True)
 
     style = InstanceDict(SliderStyle).tag(sync=True, **widget_serialization)
+    behavior = CaselessStrEnum(values=['drag-tap', 'drag-snap', 'tap', 'drag', 'snap'],
+        default_value='drag-tap', help="Slider dragging behavior.").tag(sync=True)

packages/controls/src/widget_float.ts

@@ -147,8 +147,11 @@ export class FloatLogSliderView extends BaseIntSliderView {
 
   createSlider(): void {
     const orientation = this.model.get('orientation');
+    const behavior = this.model.get('behavior');
+
     noUiSlider.create(this.$slider, {
       start: this.logCalc(this.model.get('value')),
+      behaviour: behavior,
       range: {
         min: this.model.get('min'),
         max: this.model.get('max'),

packages/controls/src/widget_int.ts

@@ -203,9 +203,12 @@ export abstract class BaseIntSliderView extends DescriptionView {
    */
   createSlider(): void {
     const orientation = this.model.get('orientation');
+    const behavior = this.model.get('behavior');
+
     noUiSlider.create(this.$slider, {
       start: this.model.get('value'),
       connect: true,
+      behaviour: behavior,
       range: {
         min: this.model.get('min'),
         max: this.model.get('max'),

packages/controls/src/widget_selection.ts

@@ -746,10 +746,12 @@ export class SelectionSliderView extends DescriptionView {
     const min = 0;
     const max = labels.length - 1;
     const orientation = this.model.get('orientation');
+    const behavior = this.model.get('behavior');
 
     noUiSlider.create(this.$slider, {
       start: this.model.get('index'),
       connect: true,
+      behaviour: behavior,
       range: {
         min: min,
         max: max,

packages/schema/jupyterwidgetmodels.latest.md

@@ -509,6 +509,7 @@ Attribute        | Type             | Default          | Help
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'FloatLogSliderView'` | 
 `base`           | number (float)   | `10.0`           | Base for the logarithm
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -559,6 +560,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'FloatRangeSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is sliding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -586,6 +588,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'FloatSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -807,6 +810,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'IntRangeSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is sliding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -834,6 +838,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'IntSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -1112,6 +1117,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'SelectionRangeSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.
@@ -1136,6 +1142,7 @@ Attribute        | Type             | Default          | Help
 `_view_module`   | string           | `'@jupyter-widgets/controls'` | 
 `_view_module_version` | string           | `'2.0.0'`        | 
 `_view_name`     | string           | `'SelectionSliderView'` | 
+`behavior`       | string (one of `'drag-tap'`, `'drag-snap'`, `'tap'`, `'drag'`, `'snap'`) | `'drag-tap'`     | Slider dragging behavior.
 `continuous_update` | boolean          | `true`           | Update the value of the widget as the user is holding the slider.
 `description`    | string           | `''`             | Description of the control.
 `description_allow_html` | boolean          | `false`          | Accept HTML in the description.