Search code examples
javascriptangularjscordovacordova-plugins

type=range is not working with ng-model

I am working in ionic framework and using cordova plugin for mp3 player. Here is the code for the progress bar:
<input type="range" ng-change="barChangePosition(this)" ng-model="position" name="seekbar" min="0" max="{{trackDuration}}">. enter image description here

In controller.js

timer = $interval(function() {
    $scope.trackDuration = $scope.audio.getDuration();
    $scope.audio.getCurrentPosition(
        function(position) {
            if (position > -1) {
                $scope.tempPosition = position;
                $scope.position = position;
            }
        },
        function(e) {
            $scope.error = e;
        });

    }, 1000);

I want to change the position of progress bar with time. For the first time its playing and changing the positions perfectly. {{tempPosition}} and {{position}} both works fine. But if I click on that progress bar to change its position then {{tempPosition}} works fine but {{position}} as well as progress bar stopped changing with time(does't work).

{{position}}<br/>
{{tempPosition}}<br/>

What can I do for this. I have also tried with $watch but getting the same issue. I think I am missing something. Please help!

Solution

  • Issue resolved: I have to use data.position. Please check this link http://forum.ionicframework.com/t/working-with-ng-model-and-input-type-range/949

    Here is the full code:

    <input type="range" ng-model="data.position" name="seekbar" min="0" max="{{trackDuration}}">

    Controller.js 

    .controller('MainController', function($scope, $interval) {
    $scope.controllerName = "MainController";
    $scope.data = {};
    $scope.data.pos = 0;
    timer = $interval(function() {
       $scope.trackDuration = 50;
       $scope.data.pos ++;
    }, 1000);
});