Skip to content

Commit

Permalink
fix(material/slider): fix tick mark precision
Browse files Browse the repository at this point in the history
* Fixes issue #26459
* Fixes a bug where the number of tick
  marks can be miscalculated when the
  step is a decimal (e.g. 1.5)
  • Loading branch information
wagnermaciel committed Nov 27, 2023
1 parent 6411dad commit 90b9fd7
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 5 deletions.
3 changes: 2 additions & 1 deletion src/material/slider/slider-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,8 @@ export class MatSliderThumb implements _MatSliderThumb, OnDestroy, ControlValueA
if (this._slider._isRtl) {
return (1 - this.percentage) * this._slider._cachedWidth;
}
return this.percentage * this._slider._cachedWidth;
const tickMarkOffset = 3; // The spaces before & after the start & end tick marks.
return this.percentage * (this._slider._cachedWidth - tickMarkOffset * 2) + tickMarkOffset;
}

_calcTranslateXByPointerEvent(event: PointerEvent): number {
Expand Down
13 changes: 11 additions & 2 deletions src/material/slider/slider.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,16 @@ describe('MDC-based MatSlider', () => {
expect(input.min).withContext('min').toBe(min);
expect(input.max).withContext('max').toBe(max);
expect(input.value).withContext('value').toBe(value);
expect(input.translateX).withContext('translateX').toBeCloseTo(translateX, 0.1);

// Note: This ±6 is here to account for the slight shift of the slider
// thumb caused by the tick marks being 3px away from the track start
// and end.
//
// This check is meant to ensure the "ideal" estimate is within 3px of the
// actual slider thumb position.
expect(input.translateX - 6 < translateX && input.translateX + 6 > translateX)
.withContext(`translateX: ${input.translateX} should be close to ${translateX}`)
.toBeTrue();
if (step !== undefined) {
expect(input.step).withContext('step').toBe(step);
}
Expand Down Expand Up @@ -1433,7 +1442,7 @@ describe('MDC-based MatSlider', () => {
});
});

const SLIDER_STYLES = ['.mat-mdc-slider { width: 300px; }'];
const SLIDER_STYLES = ['.mat-mdc-slider { width: 306px; }'];

@Component({
template: `
Expand Down
4 changes: 2 additions & 2 deletions src/material/slider/slider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -869,8 +869,8 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {

private _updateTickMarkUINonRange(step: number): void {
const value = this._getValue();
let numActive = Math.max(Math.round((value - this.min) / step), 0);
let numInactive = Math.max(Math.round((this.max - value) / step), 0);
let numActive = Math.max(Math.floor((value - this.min) / step), 0);
let numInactive = Math.max(Math.floor((this.max - value) / step), 0);
this._isRtl ? numActive++ : numInactive++;

this._tickMarks = Array(numActive)
Expand Down

0 comments on commit 90b9fd7

Please sign in to comment.