Skip to content

Commit

Permalink
fix(material/slider): Tick marks changes position as the slider is ch…
Browse files Browse the repository at this point in the history
…anged (for a step that is decimal number) (#29108)

Fixes the bug in the Angular Material 'slider' component.
Changed the function in the calculation from .floor to .round
Due to floating-point precision in JavaScript. (1 - 0.9) / 0.1 evaluates to 0.9999999999999999
Even though mathematically it should be 1
The calculation in the code resulted in slightly smaller value.
Math.floor(0.9999999999999999) evaluates to 0.
Math.round(0.9999999999999999) evaluates to 1.

Fixes #29084
  • Loading branch information
lsamboretrorabbit authored May 30, 2024
1 parent 5f93316 commit 3314414
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions src/material/slider/slider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -870,8 +870,8 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {

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

this._tickMarks = Array(numActive)
Expand All @@ -883,9 +883,9 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
const endValue = this._getValue();
const startValue = this._getValue(_MatThumb.START);

const numInactiveBeforeStartThumb = Math.max(Math.floor((startValue - this.min) / step), 0);
const numActive = Math.max(Math.floor((endValue - startValue) / step) + 1, 0);
const numInactiveAfterEndThumb = Math.max(Math.floor((this.max - endValue) / step), 0);
const numInactiveBeforeStartThumb = Math.max(Math.round((startValue - this.min) / step), 0);
const numActive = Math.max(Math.round((endValue - startValue) / step) + 1, 0);
const numInactiveAfterEndThumb = Math.max(Math.round((this.max - endValue) / step), 0);
this._tickMarks = Array(numInactiveBeforeStartThumb)
.fill(_MatTickMark.INACTIVE)
.concat(
Expand Down

0 comments on commit 3314414

Please sign in to comment.