Typescript button for html range slider

Ionic Framework ionic-v3
1

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…

$("#rangeInput").val('0')

I wonder what’s its equivalence for typescript?

2

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

Controller:

public value = 0;

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

Thanks for your reply… let me try this again.

4

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

Any other opinion would be appreciated.

Thanks,

5

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

1 Like
6

strange… I will try again.

7

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,