Slider with Decimal digit having issues in Angular 10

Which @angular/* package(s) are the source of the bug?

common

Is this a regression?

No

Description

I am working on a range slider but I observed setting values in decimal is not working fine in Angular 10+. It is strange that if I did the same code in just HTML alone it is working fine.

app.component.html:

<input
  #slider3
  type="range"
  min="1.3"
  max="2.7"
  value="1.9"
  step="0.1"
/>
Result: {{ output}}

app.component.ts:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('slider3', { read: ElementRef })
  public sliderOne: ElementRef;
  output;

  ngAfterViewInit(): void {
    console.log('..', this.sliderOne.nativeElement.value);
    this.output = this.sliderOne.nativeElement.value;
  }
} 

The output should be 1.9.

I could see in HTML only the same result as well as in till Angular 9 version but from Angular 10 I am seeing a different output 2.3

Luckily I did a workaround for this but I am wondering what is the issue?

Angular 9:(correct output)

Angular 11:(wrong output)

Stack Overflow:

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-11-new-r2l1ta?file=src%2Fapp%2Fapp.component.ts

Please provide the exception or error you saw

Giving a wrong output in Angular 10+ version but we are getting correct output till Angular 9

Please provide the environment you discovered this bug in

No response

Anything else?

No response

[gkalpak]

Yes, this is related to the order of applying the various attributes. According to the spec, “The default value is the minimum plus half the difference between the minimum and the maximum”. So, once min is set to 1.3 and max to 2.7, the default value would be 2.

However, this is subject to the input’s step (which defaults to 1) and the related step base (which in this case is derived from the min value, i.e. 1.3). So, the allowed values would be 1.3, 2.3, 3.3. Thus, when we try to set the value property to 1.9, the browser changes the value to the closest allowed value: 2.3.

Finally, changing the step to 0.1 does not have any effect on the set value of 2.3.

As a work-around, you could move the step attribute before the value attribute.

 <input
   #slider3
   type="range"
   min="1.3"
   max="2.7"
+  step="0.1"
   value="1.3"
-  step="0.1"
 />

That said, I am not sure why this works when using attributes in plain HTML. I couldn’t find something in the spec after a quick look (but maybe I’ve missed it). It seems, though, the browser applies the various constraints in specific order (first step, then min/max, then value?).

I don’t know how easy it would be for Angular to do something similar (i.e. look at the various attributes and then order the Ivy instructions based on the present attributes.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}