Merge pull request #3617 from ibdafna/fix_slider

Fix slider change event issue with tapping

Author: jasongrout

packages/controls/src/widget_float.ts

@@ -4,10 +4,10 @@
 import { CoreDescriptionModel } from './widget_core';
 
 import {
-  IntSliderView,
+  BaseIntSliderView,
   IntRangeSliderView,
+  IntSliderView,
   IntTextView,
-  BaseIntSliderView,
 } from './widget_int';
 
 import { format } from 'd3-format';
@@ -166,13 +166,14 @@ export class FloatLogSliderView extends BaseIntSliderView {
       },
     });
 
-    // Using noUiSlider's event handler
+    // Using noUiSlider's 'update' and 'change' events.
+    // See reference: https://refreshless.com/nouislider/events-callbacks/
     this.$slider.noUiSlider.on('update', (values: any, handle: any) => {
-      this.handleSliderChange(values, handle);
+      this.handleSliderUpdateEvent(values, handle);
     });
 
-    this.$slider.noUiSlider.on('end', (values: any, handle: any) => {
-      this.handleSliderChanged(values, handle);
+    this.$slider.noUiSlider.on('change', (values: any, handle: any) => {
+      this.handleSliderChangeEvent(values, handle);
     });
   }
 
@@ -222,10 +223,11 @@ export class FloatLogSliderView extends BaseIntSliderView {
       }
     }
   }
+
   /**
-   * Called when the slider value is changing.
+   * Called whilst the slider is dragged, tapped or moved by the arrow keys.
    */
-  handleSliderChange(values: number[], handle: number): void {
+  handleSliderUpdateEvent(values: number[], handle: number): void {
     const base = this.model.get('base');
     const actual_value = Math.pow(base, this._validate_slide_value(values[0]));
     this.readout.textContent = this.valueToString(actual_value);
@@ -237,6 +239,18 @@ export class FloatLogSliderView extends BaseIntSliderView {
     }
   }
 
+  /**
+   * Called when the slider handle is released after dragging,
+   * or by tapping or moving by the arrow keys.
+   */
+  handleSliderChangeEvent(values: number[], handle: number): void {
+    const base = this.model.get('base');
+    const actual_value = Math.pow(base, this._validate_slide_value(values[0]));
+    this.readout.textContent = this.valueToString(actual_value);
+
+    this.handleSliderChanged(values, handle);
+  }
+
   /**
    * Called when the slider value has changed.
    *

packages/controls/src/widget_int.ts

@@ -3,7 +3,7 @@
 
 import { CoreDescriptionModel } from './widget_core';
 
-import { DescriptionView, DescriptionStyleModel } from './widget_description';
+import { DescriptionStyleModel, DescriptionView } from './widget_description';
 
 import { DOMWidgetView, WidgetView } from '@jupyter-widgets/base';
 
@@ -223,13 +223,14 @@ export abstract class BaseIntSliderView extends DescriptionView {
       },
     });
 
-    // Using noUiSlider's event handler
+    // Using noUiSlider's 'update' and 'change' events.
+    // See reference: https://refreshless.com/nouislider/events-callbacks/
     this.$slider.noUiSlider.on('update', (values: any, handle: any) => {
-      this.handleSliderChange(values, handle);
+      this.handleSliderUpdateEvent(values, handle);
     });
 
-    this.$slider.noUiSlider.on('end', (values: any, handle: any) => {
-      this.handleSliderChanged(values, handle);
+    this.$slider.noUiSlider.on('change', (values: any, handle: any) => {
+      this.handleSliderChangeEvent(values, handle);
     });
   }
 
@@ -268,9 +269,15 @@ export abstract class BaseIntSliderView extends DescriptionView {
   abstract handleTextChange(): void;
 
   /**
-   * Called when the slider value is changing.
+   * Called when the slider handle is released after dragging,
+   * or by tapping or moving by the arrow keys.
    */
-  abstract handleSliderChange(value: any, handle: any): void;
+  abstract handleSliderChangeEvent(value: any, handle: any): void;
+
+  /**
+   * Called whilst the slider is dragged, tapped or moved by the arrow keys.
+   */
+  abstract handleSliderUpdateEvent(value: any, handle: any): void;
 
   /**
    * Called when the slider value has changed.
@@ -366,7 +373,21 @@ export class IntRangeSliderView extends BaseIntSliderView {
     }
   }
 
-  handleSliderChange(values: any, handle: any): void {
+  /**
+   * Called when the slider handle is released after dragging,
+   * or by tapping or moving by the arrow keys.
+   */
+  handleSliderChangeEvent(values: any, handle: any): void {
+    const actual_value = values.map(this._validate_slide_value);
+    this.readout.textContent = this.valueToString(actual_value);
+
+    this.handleSliderChanged(values, handle);
+  }
+
+  /**
+   * Called whilst the slider is dragged, tapped or moved by the arrow keys.
+   */
+  handleSliderUpdateEvent(values: any, handle: any): void {
     const actual_value = values.map(this._validate_slide_value);
     this.readout.textContent = this.valueToString(actual_value);
 
@@ -460,8 +481,15 @@ export class IntSliderView extends BaseIntSliderView {
     }
   }
 
-  handleSliderChange(values: any, handle: any): void {
-    const actual_value = this._validate_slide_value(values[handle]);
+  handleSliderChangeEvent(values: any, handle: any): void {
+    const actual_value = values.map(this._validate_slide_value);
+    this.readout.textContent = this.valueToString(actual_value);
+
+    this.handleSliderChanged(values, handle);
+  }
+
+  handleSliderUpdateEvent(values: any, handle: any): void {
+    const actual_value = values.map(this._validate_slide_value);
     this.readout.textContent = this.valueToString(actual_value);
 
     // Only persist the value while sliding if the continuous_update

packages/controls/src/widget_selection.ts

@@ -5,12 +5,12 @@ import { WidgetView } from '@jupyter-widgets/base';
 
 import { CoreDescriptionModel } from './widget_core';
 
-import { DescriptionView, DescriptionStyleModel } from './widget_description';
+import { DescriptionStyleModel, DescriptionView } from './widget_description';
 
 import { uuid } from './utils';
 
-import * as utils from './utils';
 import noUiSlider from 'nouislider';
+import * as utils from './utils';
 
 export class SelectionModel extends CoreDescriptionModel {
   defaults(): Backbone.ObjectHash {
@@ -769,13 +769,14 @@ export class SelectionSliderView extends DescriptionView {
       },
     });
 
-    // Using noUiSlider's event handler
+    // Using noUiSlider's 'update' and 'change' events.
+    // See reference: https://refreshless.com/nouislider/events-callbacks/
     this.$slider.noUiSlider.on('update', (values: number[], handle: number) => {
-      this.handleSliderChange(values, handle);
+      this.handleSliderUpdateEvent(values, handle);
     });
 
-    this.$slider.noUiSlider.on('end', (values: number[], handle: number) => {
-      this.handleSliderChanged(values, handle);
+    this.$slider.noUiSlider.on('change', (values: number[], handle: number) => {
+      this.handleSliderChangeEvent(values, handle);
     });
   }
 
@@ -797,9 +798,9 @@ export class SelectionSliderView extends DescriptionView {
   }
 
   /**
-   * Called when the slider value is changing.
+   * Called whilst the slider is dragged, tapped or moved by the arrow keys.
    */
-  handleSliderChange(values: number[], handle: number): void {
+  handleSliderUpdateEvent(values: number[], handle: number): void {
     const index = values[0];
     this.updateReadout(index);
 
@@ -810,6 +811,17 @@ export class SelectionSliderView extends DescriptionView {
     }
   }
 
+  /**
+   * Called when the slider handle is released after dragging,
+   * or by tapping or moving by the arrow keys.
+   */
+  handleSliderChangeEvent(values: number[], handle: number): void {
+    const index = values[0];
+    this.updateReadout(index);
+
+    this.handleSliderChanged(values, handle);
+  }
+
   /**
    * Called when the slider value has changed.
    *
@@ -951,7 +963,7 @@ export class SelectionRangeSliderView extends SelectionSliderView {
   /**
    * Called when the slider value is changing.
    */
-  handleSliderChange(values: number[], handle: any): void {
+  handleSliderUpdateEvent(values: number[], handle: any): void {
     const intValues = values.map(Math.trunc);
     this.updateReadout(intValues);