Can I use step=0.01 with an ion-range component?

Ionic Framework ionic-v3
#1

I’m new to ionic and angular. I’d like to use a range input to control an audio element volume, like this, but it isn’t working:

<ion-range min="0" max="1" step="0.01" [(ngModel)]="audio.volume">

The following works (but then I don’t have the styling and can’t use <ion-icon range-left name="volume-down">, etc):

<input type="range" min="0" max="1" step="0.01" [(ngModel)]="audio.volume">

The following also works and indicates that it’s the non-integer step size causing the problem:

<ion-range min="0" max="100" pin="true" [ngModel]="100*audio.volume" (ngModelChange)="audio.volume=$event/100">

Is ion-range meant to only work with integer step sizes? Is there a way to use ion-range with a decimal step size? Is this a bug or something I’m doing wrong?

4 Likes
#2

Hey jmilloy, although I cannot answer your question directly, whether Ionic supports decimal ranges or not. What I can suggest though, is that you can simply define your range as integers, but then simply divide it by 100 or whatever precision you want inside the controller. You can even somewhat automate that, by having a hidden field that has the value from the ion-range model divided by whatever you want.

#3

Yes, as you can see I showed that workaround in my original post.

1 Like
#4

Did you ever get an answer to this question? Thanks!

#5

No, we’re still essentially using the workaround above.

1 Like
#6

I’ve got the exact same issue. I’ve setup a method to take care of the scaling… Not ideal, but works!