Merge pull request #3216 from jasongrout/upgrade-nouislider

Upgrade nouislider

packages/base/src/widget.ts

@@ -347,11 +347,25 @@ export class WidgetModel extends Backbone.Model {
         }
       }
 
+      // _buffered_state_diff_synced lists things that have already been sent to the kernel during a top-level call to .set(), so we don't need to buffer these things either.
+      if (this._buffered_state_diff_synced) {
+        for (const key of Object.keys(this._buffered_state_diff_synced)) {
+          if (attrs[key] === this._buffered_state_diff_synced[key]) {
+            delete attrs[key];
+          }
+        }
+      }
+
       this._buffered_state_diff = utils.assign(
         this._buffered_state_diff,
         attrs
       );
     }
+
+    // If this ended a top-level call to .set, then reset _buffered_state_diff_synced
+    if ((this as any)._changing === false) {
+      this._buffered_state_diff_synced = {};
+    }
     return return_value;
   }
 
@@ -516,6 +530,12 @@ export class WidgetModel extends Backbone.Model {
         options.callbacks = callbacks;
       }
       this.save(this._buffered_state_diff, options);
+
+      // If we are currently in a .set() call, save what state we have synced
+      // to the kernel so we don't buffer it again as we come out of the .set call.
+      if ((this as any)._changing) {
+        utils.assign(this._buffered_state_diff_synced, this._buffered_state_diff);
+      }
       this._buffered_state_diff = {};
     }
   }
@@ -595,6 +615,7 @@ export class WidgetModel extends Backbone.Model {
   private _closed: boolean;
   private _state_lock: any;
   private _buffered_state_diff: any;
+  private _buffered_state_diff_synced: any;
   private _msg_buffer: any;
   private _msg_buffer_callbacks: any;
   private _pending_msgs: number;

packages/controls/css/nouislider-custom.css

@@ -0,0 +1,100 @@
+/* Custom CSS */
+
+.widget-slider .noUi-connect {
+  background: rgb(33, 150, 243);
+}
+
+.widget-slider .noUi-horizontal {
+  height: var(--jp-widgets-slider-track-thickness);
+}
+
+.widget-slider .noUi-vertical {
+  width: var(--jp-widgets-slider-track-thickness);
+  height: 100%;
+}
+
+.widget-slider .noUi-horizontal .noUi-handle {
+  width: var(--jp-widgets-slider-handle-size);
+  height: var(--jp-widgets-slider-handle-size);
+  border-radius: 50%;
+  top: calc(
+    (
+        var(--jp-widgets-slider-track-thickness) -
+          var(--jp-widgets-slider-handle-size)
+      ) / 2
+  );
+  right: calc(var(--jp-widgets-slider-handle-size) / -2);
+}
+
+.widget-slider .noUi-vertical .noUi-handle {
+  height: var(--jp-widgets-slider-handle-size);
+  width: var(--jp-widgets-slider-handle-size);
+  border-radius: 50%;
+  right: calc(
+    (
+        var(--jp-widgets-slider-handle-size) -
+          var(--jp-widgets-slider-track-thickness)
+      ) / -2
+  );
+  top: calc(var(--jp-widgets-slider-handle-size) / -2);
+}
+
+.widget-slider .noUi-handle:after {
+  content: none;
+}
+
+.widget-slider .noUi-handle:before {
+  content: none;
+}
+
+.widget-slider .noUi-target {
+  background: #fafafa;
+  border-radius: 4px;
+  border: 1px;
+  /* box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; */
+}
+
+.widget-slider .ui-slider {
+  border: var(--jp-widgets-slider-border-width) solid var(--jp-layout-color3);
+  background: var(--jp-layout-color3);
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 0px;
+}
+
+.widget-slider .noUi-handle {
+  width: var(--jp-widgets-slider-handle-size);
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  background: #fff;
+  cursor: default;
+  box-shadow: none;
+  outline: none;
+}
+
+.widget-slider .noUi-target:not([disabled]) .noUi-handle:hover,
+.widget-slider .noUi-target:not([disabled]) .noUi-handle:focus {
+  background-color: var(--jp-widgets-slider-active-handle-color);
+  border: var(--jp-widgets-slider-border-width) solid
+    var(--jp-widgets-slider-active-handle-color);
+}
+
+.widget-slider [disabled].noUi-target {
+  opacity: 0.35;
+}
+
+.widget-slider .noUi-connects {
+  overflow: visible;
+  z-index: 0;
+  background: var(--jp-layout-color3);
+}
+
+.widget-slider .noUi-vertical .noUi-connect {
+  width: calc(100% + 2px);
+  right: -1px;
+}
+
+.widget-slider .noUi-horizontal .noUi-connect {
+  height: calc(100% + 2px);
+  top: -1px;
+}