noUiSlider implementation

[ibdafna]

WIP PR for the new slider implementation.

Fixes #630

Todo:

1. Additional testing of single-handle slider logic
2. Kernel-side valiation of model.value so it is consistent with min/max and step (as discussed)
3. Styling (current visuals are different from the JQuery-UI implementation
4. Rewrite dual-handle slider functions to use noUiSlider (almost done)

[jasongrout]

With this: widgets.IntSlider(orientation='vertical'), it used to be that min was at the bottom and max was at the top. Now it's reversed so that min is at the top and the max is at the bottom.

[jasongrout]

widgets.IntSlider(style={'handle_color': 'red'}) no longer styles the handle red.

[jasongrout]

@ibdafna - I'm just playing around with this and making notes where I see issues.

[jasongrout]

It feels like the slider thumb is just slightly off-center from its track. It feels like it is a pixel or two too high.

Edit: I just measured. It's one pixel too high.

[jasongrout]

@ibdafna has already pointed this out, but I'll note it here to make sure we take another look: widgets.FloatLogSlider() is extremely laggy compared to before. Grab the thumb and drag it around, and you see the thumb is very slow to update.

[jasongrout]

Stylistically, the range region used to be much thicker with widgets.IntRangeSlider()

Before:

After:

[jasongrout]

Just like with the FloatLogSlider, widgets.SelectionRangeSlider(options=range(10), value=(2,4)) is very laggy when dragging a thumb compared to before.

[jasongrout]

For the lagginess, I tried turning off animation in some cases:

diff --git a/packages/controls/src/widget_float.ts b/packages/controls/src/widget_float.ts
index 2aee38fb8..94503c90f 100644
--- a/packages/controls/src/widget_float.ts
+++ b/packages/controls/src/widget_float.ts
@@ -147,13 +147,14 @@ class FloatLogSliderView extends BaseIntSliderView {
             log_value = min;
         }
 
-        return log_value
+        return log_value;
     }
 
     createSlider() {
         console.log("Twitter");
         noUiSlider.create(this.$slider, {
             start: this.logCalc(this.model.get('value')),
+            animate: this.model.get('max') % 2 === 0,
             connect: this.connect,
             range: {
                 'min': this.model.get('min'),
diff --git a/packages/controls/src/widget_int.ts b/packages/controls/src/widget_int.ts
index 43665d2be..cabbee91f 100644
--- a/packages/controls/src/widget_int.ts
+++ b/packages/controls/src/widget_int.ts
@@ -228,6 +228,7 @@ abstract class BaseIntSliderView extends DescriptionView {
         noUiSlider.create(this.$slider, {
             start: this.model.get('value'),
             connect: this.connect,
+            animate: this.model.get('max') % 2 === 0,
             range: {
                 'min': this.model.get('min'),
                 'max': this.model.get('max')
diff --git a/packages/controls/src/widget_selection.ts b/packages/controls/src/widget_selection.ts
index 4369564bb..f2335f4f8 100644
--- a/packages/controls/src/widget_selection.ts
+++ b/packages/controls/src/widget_selection.ts
@@ -686,6 +686,7 @@ class SelectionSliderView extends DescriptionView {
         noUiSlider.create(this.$slider, {
             start: this.model.get('index'),
             connect: true,
+            animate: max % 2 === 0,
             range: {
                 'min': min,
                 'max': max

It made a world of difference (just try doing FloatSlider(max=9) vs FloatSlider(max=10)). I know the animation looks cool, but I think we ought to turn it off until we can figure out how to avoid the lagginess.

[ibdafna]

Just did another round of testing. Outstanding issues:

1. Finish fixing horizontal orientation CSS. The alignment seems to change too between some of the slider types - will investigate in the morning.
2. Fix disabled mode CSS. It is not clear from the styling that the handles are disabled, which may cause confusion.
3. Not passing a step value still seems to default to a step of 0.1 on the frontend. Will also investigate in the morning.

All other functionality seems to be working fine!

[jasongrout]

Not passing a step value still seems to default to a step of 0.1 on the frontend. Will also investigate in the morning.

I think that is intentional? The attribute specification says that 0.1 is the default step for a float slider.

[jasongrout]

Also finish fixing the thickening of the connection between range slider handles for the horizontal case.

[ibdafna]

Changed some of the function signatures to accept the updated_view attribute. This is now used to validate whether the slider should update its value when the updateSliderValue callback is invoked. This now enables smooth animations with no lags - shall we revisit this before merging?

[jasongrout]

shall we revisit this before merging?

Sure, let's look at it tomorrow. Thanks for looking into it!

[jasongrout]

Thanks so much for your hard work on this!

[SylvainCorlay]

Congrats @ibdafna !

[martinRenou]

Thanks a lot @ibdafna ! Awesome work