Typescript button for html range slider

Hello guys,

I’m dealing with a problem I’ve never dealt with before.
I have an HTML range slider.

<input type="range" min="0" max="100" id="rangerinput">

and I have a button linked to a typescript function. It’s meant to set range slider’s thumb to 0 position.

<button (click)="setMinimumToZero()">Set to Zero</button>

What kind of typescript function can set input range slider’s thumb / value to 0?

In JavaScript, there are many working examples. If I put this in script tag, it will set its value to 0…


I wonder what’s its equivalence for typescript?

<input type="range" min="0" max="100" [value]="value">


public value = 0;

public setMinimumToZero() {
  this.value = 0;
1 Like

Thanks for your reply… let me try this again.

Hmm… that didn’t work. It doesn’t move html range slider on ionic.

Any other opinion would be appreciated.


Not sure why it wouldn’t work, that’s what I’m doing in one of my projects.

1 Like

strange… I will try again.

I solved the problem here.

You have to set public value to number:

public value: number;

that way you can assign any numeric value in function:

public setMinimumToZero() {
   this.value = 0; 

It works like charm!

Thanks again,