Changing the value of the input range AngularJS

Question

Range should change its value and position depending on the param and has not changed to change the param

HTML:

  <body  ng-app="myApp">
    <div ng-controller="MyRngCtrl">
      Param:{{param}}
    </div>
    <hr>
    <div ng-controller="rangeCtrl">
    <div>modelValue:{{modelValue}}</div>
      <input type="range" style="width: 300px;"
             min = "0"
             max = "300"
             step = "1"
             ng-change = "rangeChange()"
             ng-model = "modelValue">
    </div>
  </body>

JS:

app.controller('rangeCtrl', function($scope) {

    $scope.modelValue =  $scope.param;
    $scope.rangeChange = function() {
    }
});

Example: JSFiddle

Your example here does not represent your fiddle. Then, you are using two different controllers and then you are updating a value outside of the digest-cycle of angularjs. — bash.d
– bash.d, Commented Dec 7, 2016 at 10:16
@bash.d in the original problem, my controller looks like that: JSFibble — AndreyH
– AndreyH, Commented Dec 7, 2016 at 10:26
In the first example, the controller "MyRngCtrl" simply "simulates" value param — AndreyH
– AndreyH, Commented Dec 7, 2016 at 10:32

Gourav · Accepted Answer · 2016-12-07 10:42:59Z

1

Try this

var app = angular.module('myApp', []);
app.controller('MyRngCtrl', function($scope, $timeout) {

  (function update() {
    $timeout(update, 5000);
    $scope.param = Math.round((Math.random() * 10) * 10 * 3);
    $scope.modelValue = $scope.param

  }());
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyRngCtrl">
    Param:{{param}}

    <hr>

    <div>modelValue:{{param}}</div>
    <input type="range" style="width: 300px;" min="0" max="300" step="1" ng-change="rangeChange()" ng-model="modelValue">
  </div>
</body>

answered Dec 7, 2016 at 10:42

Gourav

264 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bash.d Over a year ago

This solution works, but your callback logic is tied to the timeout handler, this is not very good style.

Gourav · Accepted Answer · 2016-12-07 11:02:21Z

0

I have one more Answer using $rootScope

var app = angular.module('myApp', []);
app.controller('MyRngCtrl', function($rootScope, $timeout) {
  (function update() {
    $timeout(update, 5000);
    $rootScope.param = Math.round((Math.random() * 10) * 10 * 3);
  }());
});
app.controller('rangeCtrl', function($scope, $rootScope, $timeout) {
  (function update() {
    $timeout(update, 5000);
    $scope.modelValue = $rootScope.param;
  }());
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyRngCtrl">
    Param:{{param}}
  </div>
  <hr>
  <div ng-controller="rangeCtrl">
    <div>modelValue:{{modelValue}}</div>
    <input type="range" style="width: 300px;" min="0" max="300" step="1" ng-model="modelValue">
  </div>
</body>

answered Dec 7, 2016 at 11:02

Gourav

264 bronze badges

2 Comments

AndreyH Over a year ago

It looks great! I went to the other side: JSFiddle, and faced with the fact that I can not change "modelValue" at least for a while, until the value of "Param" not changed

AndreyH Over a year ago

if you reduce the period of "$ timeout" then there is the same problem will

Collectives™ on Stack Overflow

Changing the value of the input range AngularJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related