Skip to content

Commit ab9a53e

Browse files
ibdafnaibdafna
committed
Fix slider change event issue with tapping
Signed-off-by: Itay Dafna <[email protected]>
1 parent e3d8fe5 commit ab9a53e

File tree

3 files changed

+63
-28
lines changed

3 files changed

+63
-28
lines changed

‎packages/controls/src/widget_float.ts

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@
44
import { CoreDescriptionModel } from './widget_core';
55

66
import {
7-
IntSliderView,
8-
IntRangeSliderView,
9-
IntTextView,
10-
BaseIntSliderView,
7+
BaseIntSliderView, IntRangeSliderView, IntSliderView, IntTextView
118
} from './widget_int';
129

1310
import { format } from 'd3-format';
@@ -103,7 +100,7 @@ export class FloatLogSliderModel extends BoundedFloatModel {
103100
readout_formatter: any;
104101
}
105102

106-
export class FloatRangeSliderModel extends FloatSliderModel {}
103+
export class FloatRangeSliderModel extends FloatSliderModel { }
107104

108105
export class FloatSliderView extends IntSliderView {
109106
/**
@@ -168,11 +165,11 @@ export class FloatLogSliderView extends BaseIntSliderView {
168165

169166
// Using noUiSlider's event handler
170167
this.$slider.noUiSlider.on('update', (values: any, handle: any) => {
171-
this.handleSliderChange(values, handle);
168+
this.handleSliderUpdateEvent(values, handle);
172169
});
173170

174-
this.$slider.noUiSlider.on('end', (values: any, handle: any) => {
175-
this.handleSliderChanged(values, handle);
171+
this.$slider.noUiSlider.on('change', (values: any, handle: any) => {
172+
this.handleSliderChangeEvent(values, handle);
176173
});
177174
}
178175

@@ -225,7 +222,7 @@ export class FloatLogSliderView extends BaseIntSliderView {
225222
/**
226223
* Called when the slider value is changing.
227224
*/
228-
handleSliderChange(values: number[], handle: number): void {
225+
handleSliderUpdateEvent(values: number[], handle: number): void {
229226
const base = this.model.get('base');
230227
const actual_value = Math.pow(base, this._validate_slide_value(values[0]));
231228
this.readout.textContent = this.valueToString(actual_value);
@@ -237,6 +234,14 @@ export class FloatLogSliderView extends BaseIntSliderView {
237234
}
238235
}
239236

237+
handleSliderChangeEvent(values: number[], handle: number): void {
238+
const base = this.model.get('base');
239+
const actual_value = Math.pow(base, this._validate_slide_value(values[0]));
240+
this.readout.textContent = this.valueToString(actual_value);
241+
242+
this.handleSliderChanged(values, handle);
243+
}
244+
240245
/**
241246
* Called when the slider value has changed.
242247
*

‎packages/controls/src/widget_int.ts

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { CoreDescriptionModel } from './widget_core';
55

6-
import { DescriptionView, DescriptionStyleModel } from './widget_description';
6+
import { DescriptionStyleModel, DescriptionView } from './widget_description';
77

88
import { DOMWidgetView, WidgetView } from '@jupyter-widgets/base';
99

@@ -78,7 +78,7 @@ export class IntSliderModel extends BoundedIntModel {
7878
readout_formatter: any;
7979
}
8080

81-
export class IntRangeSliderModel extends IntSliderModel {}
81+
export class IntRangeSliderModel extends IntSliderModel { }
8282

8383
export abstract class BaseIntSliderView extends DescriptionView {
8484
render(): void {
@@ -225,11 +225,11 @@ export abstract class BaseIntSliderView extends DescriptionView {
225225

226226
// Using noUiSlider's event handler
227227
this.$slider.noUiSlider.on('update', (values: any, handle: any) => {
228-
this.handleSliderChange(values, handle);
228+
this.handleSliderUpdateEvent(values, handle);
229229
});
230230

231-
this.$slider.noUiSlider.on('end', (values: any, handle: any) => {
232-
this.handleSliderChanged(values, handle);
231+
this.$slider.noUiSlider.on('change', (values: any, handle: any) => {
232+
this.handleSliderChangeEvent(values, handle);
233233
});
234234
}
235235

@@ -268,9 +268,14 @@ export abstract class BaseIntSliderView extends DescriptionView {
268268
abstract handleTextChange(): void;
269269

270270
/**
271-
* Called when the slider value is changing.
271+
* Called when the slider value changes on mouseUp.
272272
*/
273-
abstract handleSliderChange(value: any, handle: any): void;
273+
abstract handleSliderChangeEvent(value: any, handle: any): void;
274+
275+
/**
276+
* Called when the slider value changes whilst dragging.
277+
*/
278+
abstract handleSliderUpdateEvent(value: any, handle: any): void;
274279

275280
/**
276281
* Called when the slider value has changed.
@@ -366,7 +371,14 @@ export class IntRangeSliderView extends BaseIntSliderView {
366371
}
367372
}
368373

369-
handleSliderChange(values: any, handle: any): void {
374+
handleSliderChangeEvent(values: any, handle: any): void {
375+
const actual_value = values.map(this._validate_slide_value);
376+
this.readout.textContent = this.valueToString(actual_value);
377+
378+
this.handleSliderChanged(values, handle);
379+
}
380+
381+
handleSliderUpdateEvent(values: any, handle: any): void {
370382
const actual_value = values.map(this._validate_slide_value);
371383
this.readout.textContent = this.valueToString(actual_value);
372384

@@ -460,8 +472,16 @@ export class IntSliderView extends BaseIntSliderView {
460472
}
461473
}
462474

463-
handleSliderChange(values: any, handle: any): void {
464-
const actual_value = this._validate_slide_value(values[handle]);
475+
476+
handleSliderChangeEvent(values: any, handle: any): void {
477+
const actual_value = values.map(this._validate_slide_value);
478+
this.readout.textContent = this.valueToString(actual_value);
479+
480+
this.handleSliderChanged(values, handle);
481+
}
482+
483+
handleSliderUpdateEvent(values: any, handle: any): void {
484+
const actual_value = values.map(this._validate_slide_value);
465485
this.readout.textContent = this.valueToString(actual_value);
466486

467487
// Only persist the value while sliding if the continuous_update

‎packages/controls/src/widget_selection.ts

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import { WidgetView } from '@jupyter-widgets/base';
55

66
import { CoreDescriptionModel } from './widget_core';
77

8-
import { DescriptionView, DescriptionStyleModel } from './widget_description';
8+
import { DescriptionStyleModel, DescriptionView } from './widget_description';
99

1010
import { uuid } from './utils';
1111

12-
import * as utils from './utils';
1312
import noUiSlider from 'nouislider';
13+
import * as utils from './utils';
1414

1515
export class SelectionModel extends CoreDescriptionModel {
1616
defaults(): Backbone.ObjectHash {
@@ -498,7 +498,7 @@ export class ToggleButtonsView extends DescriptionView {
498498
const previous_icons = this.model.previous('icons') || [];
499499
const previous_bstyle =
500500
(ToggleButtonsView.classMap as any)[
501-
this.model.previous('button_style')
501+
this.model.previous('button_style')
502502
] || '';
503503
const tooltips = this.model.get('tooltips') || [];
504504
const disabled = this.model.get('disabled');
@@ -771,11 +771,11 @@ export class SelectionSliderView extends DescriptionView {
771771

772772
// Using noUiSlider's event handler
773773
this.$slider.noUiSlider.on('update', (values: number[], handle: number) => {
774-
this.handleSliderChange(values, handle);
774+
this.handleSliderUpdateEvent(values, handle);
775775
});
776776

777-
this.$slider.noUiSlider.on('end', (values: number[], handle: number) => {
778-
this.handleSliderChanged(values, handle);
777+
this.$slider.noUiSlider.on('change', (values: number[], handle: number) => {
778+
this.handleSliderChangeEvent(values, handle);
779779
});
780780
}
781781

@@ -797,9 +797,9 @@ export class SelectionSliderView extends DescriptionView {
797797
}
798798

799799
/**
800-
* Called when the slider value is changing.
800+
* Called when the slider value changes whilst dragging.
801801
*/
802-
handleSliderChange(values: number[], handle: number): void {
802+
handleSliderUpdateEvent(values: number[], handle: number): void {
803803
const index = values[0];
804804
this.updateReadout(index);
805805

@@ -810,6 +810,16 @@ export class SelectionSliderView extends DescriptionView {
810810
}
811811
}
812812

813+
/**
814+
* Called on a mouseUp event.
815+
*/
816+
handleSliderChangeEvent(values: number[], handle: number): void {
817+
const index = values[0];
818+
this.updateReadout(index);
819+
820+
this.handleSliderChanged(values, handle);
821+
}
822+
813823
/**
814824
* Called when the slider value has changed.
815825
*
@@ -951,7 +961,7 @@ export class SelectionRangeSliderView extends SelectionSliderView {
951961
/**
952962
* Called when the slider value is changing.
953963
*/
954-
handleSliderChange(values: number[], handle: any): void {
964+
handleSliderUpdateEvent(values: number[], handle: any): void {
955965
const intValues = values.map(Math.trunc);
956966
this.updateReadout(intValues);
957967

0 commit comments

Comments
 (0)