Ionic/Angular input type=range

April 11th 2014 by Jessica Legner

The project:

I am starting to fiddle with the Ionic Framework, which utilizes AngualrJS for building hybrid mobile apps. The project I have started needs a range slider for specifying how much of something is left.

The code:

<input type="range" name="amount" min="0" max="100" value="{{ some.amount.passed.in }}" ng-model="some.amount">

The issue:

The issue was that initially the range was at 50 no matter what the value was. I thought the value (some.amount.passed.in) was what determined where the range would start. This is not the case. The starting point is determined by the ng-model set in my controller.

The solution:

Pass the inital value of the range in the model. I removed the value attribute entirely without any issue.

<input type="range" name="amount" min="0" max="100" ng-model="some.amount">