Skip to content

Commit 80a6bfb

Browse files
crisbetommalerba
authored andcommitted
fix(material/slider): unable to assign min/max values if they are more precise than then step (#21155)
We have some logic that trims the value to the same number of decimals as the `step`, in order to avoid assigning long decimal values. The problem is that if the `min` or `max` are more precise than the `step`, we round up just above the `min` or below the `max`, preventing the user from reaching the end values. These changes add an exception to the rounding for the `min` and `max` values. Fixes #21147. (cherry picked from commit e95edad)
1 parent 3194a3e commit 80a6bfb

File tree

2 files changed

+26
-2
lines changed

2 files changed

+26
-2
lines changed

src/material/slider/slider.spec.ts

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,29 @@ describe('MatSlider', () => {
391391
expect(ticksElement.style.transform).toContain('translateX(25%)');
392392
expect(ticksContainerElement.style.transform).toBe('translateX(-25%)');
393393
});
394+
395+
it('should be able to set the min and max values when they are more precise ' +
396+
'than the step', () => {
397+
// Note that we assign min/max with more decimals than the
398+
// step to ensure that the value doesn't get rounded up.
399+
testComponent.step = 0.5;
400+
testComponent.min = 10.15;
401+
testComponent.max = 50.15;
402+
fixture.detectChanges();
403+
404+
dispatchSlideEventSequence(sliderNativeElement, 0.5, 0);
405+
fixture.detectChanges();
406+
407+
expect(sliderInstance.value).toBe(10.15);
408+
expect(sliderInstance.percent).toBe(0);
409+
410+
dispatchSlideEventSequence(sliderNativeElement, 0.5, 1);
411+
fixture.detectChanges();
412+
413+
expect(sliderInstance.value).toBe(50.15);
414+
expect(sliderInstance.percent).toBe(1);
415+
});
416+
394417
});
395418

396419
describe('slider with set value', () => {
@@ -1510,12 +1533,13 @@ class StandardSlider { }
15101533
class DisabledSlider { }
15111534

15121535
@Component({
1513-
template: `<mat-slider [min]="min" [max]="max" tickInterval="6"></mat-slider>`,
1536+
template: `<mat-slider [min]="min" [max]="max" [step]="step" tickInterval="6"></mat-slider>`,
15141537
styles: [styles],
15151538
})
15161539
class SliderWithMinAndMax {
15171540
min = 4;
15181541
max = 6;
1542+
step = 1;
15191543
}
15201544

15211545
@Component({

src/material/slider/slider.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ export class MatSlider extends _MatSliderMixinBase
255255

256256
// While incrementing by a decimal we can end up with values like 33.300000000000004.
257257
// Truncate it to ensure that it matches the label and to make it easier to work with.
258-
if (this._roundToDecimal) {
258+
if (this._roundToDecimal && value !== this.min && value !== this.max) {
259259
value = parseFloat(value.toFixed(this._roundToDecimal));
260260
}
261261

0 commit comments

Comments
 (0)