Skip to content

Commit

Permalink
Bug Fix:Always fire rangeValueChanged event when thumb is dragged
Browse files Browse the repository at this point in the history
  • Loading branch information
JamesHollyer committed Nov 10, 2023
1 parent a3fea2a commit 3b51d7f
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@
<mat-slider class="slider" [min]="min" [max]="max" [step]="calculateStepSize()">
<input
matSliderStartThumb
(valueChange)="startThumbDrag($event)"
(valueChange)="thumbDrag()"
[(ngModel)]="lowerValue"
/>
<input
matSliderEndThumb
(valueChange)="endThumbDrag($event)"
(valueChange)="thumbDrag()"
[(ngModel)]="upperValue"
/>
</mat-slider>
18 changes: 6 additions & 12 deletions tensorboard/webapp/widgets/range_input/range_input_component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,12 @@ export class RangeInputComponent {

readonly Position = Position;

startThumbDrag(value: number) {
this.maybeNotifyNextRangeValues(
[value, this.upperValue],
RangeInputSource.SLIDER
);
}

endThumbDrag(value: number) {
this.maybeNotifyNextRangeValues(
[this.lowerValue, value],
RangeInputSource.SLIDER
);
thumbDrag() {
this.rangeValuesChanged.emit({
lowerValue: this.lowerValue,
upperValue: this.upperValue,
source: RangeInputSource.SLIDER,
});
}

calculateStepSize() {
Expand Down
16 changes: 1 addition & 15 deletions tensorboard/webapp/widgets/range_input/range_input_test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ class TestableComponent {
onRangeValuesChanged!: (event: RangeValues) => void;
}

describe('range input test', () => {
fdescribe('range input test', () => {
interface CreateComponentInput {
min?: number;
max?: number;
Expand Down Expand Up @@ -152,20 +152,6 @@ describe('range input test', () => {
'0.5'
);
});

it('does not trigger change when value does not change', () => {
const {fixture, onRangeValuesChanged} = createComponent({
lowerValue: -5,
upperValue: 1,
tickCount: 10,
});
const sliderThumb = fixture.debugElement.queryAll(
By.css('mat-slider input')
)[0];

sliderThumb.triggerEventHandler('valueChange', -5);
expect(onRangeValuesChanged).not.toHaveBeenCalled();
});
});

describe('input control', () => {
Expand Down

0 comments on commit 3b51d7f

Please sign in to comment.