How to initialize the value of an input[range] using AngularJS when value is over 100

Question

I try to initialize a slider using AngularJS, but the cursor show 100 when the value is over 100.

Setting the value 150 in a range [50,150] fails with this code :

<html ng-app="App">
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script>
		angular.module('App', ['App.controllers']);
		angular.module('App.controllers', []).controller('AppController', function($scope) {
			$scope.min = 50;
			$scope.max = 150;
			$scope.value = 150;
		});		
	</script>
</head>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" min="{{min}}" max="{{max}}" type="range" />{{max}}<br/>
	value:{{value}}
</body>
</html>

The cursor is badly placed (it show 100 instead of 150). How to display the cursor to its correct place ?

An explanation of what occurs could be on this forum

Update
This bug is reported as issue #6726

Update
The issue #14982 is closed by the Pull Request 14996 and solve the issue see answer.

I think what you have is better, check this answer as well stackoverflow.com/questions/15656617/… — PSL
– PSL, Commented Oct 19, 2014 at 18:09
There are some interesting discussions related to this here as well. github.com/angular/angular.js/issues/2404 — PSL
– PSL, Commented Oct 19, 2014 at 18:13
Thanks I read this both links several times, and some others, but I did not catch if this is an expected behaviour or a bug ? — mpromonet
– mpromonet, Commented Oct 19, 2014 at 20:03

mpromonet · Accepted Answer · 2015-03-23 19:14:32Z

5

After searches and tries , a possible way is to define a custom directive :

<html ng-app="App">
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script>
		angular.module('App', ['App.controllers']);
		angular.module('App.controllers', []).controller('AppController', function($scope) {
			$scope.min = 50;
			$scope.max = 150;
			$scope.value = 150;
		}).directive('ngMin', function() {
			return {
				restrict: 'A',
				require: 'ngModel',
				link: function(scope, elem, attr) { elem.attr('min', attr.ngMin); }
			};
		}).directive('ngMax', function() {
			return {
				restrict: 'A',
				require: 'ngModel',
				link: function(scope, elem, attr) { elem.attr('max', attr.ngMax); }
			};
		});		
	</script>
</head>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" ng-min="{{min}}" ng-max="{{max}}" type="range" />{{max}}<br/>
	value:{{value}}
</body>
</html>

Even it is working this is a non standard extension in order to manage a very basic use case.

edited Mar 23, 2015 at 19:14

answered Jan 20, 2015 at 17:16

mpromonet

12.1k45 gold badges69 silver badges99 bronze badges

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

1 Comment

E.E.33 Over a year ago

I've seen similar solutions, maybe the exact solution elsewhere. But, this one made the most sense to me.

mpromonet · Accepted Answer · 2014-10-24 18:52:28Z

2

Try this new one.

You can configure angular to make it interpolate these values. And you can use your initial code after that ...

Isn't it magic ?

Use this code only once in your app. Once angular is configured, it will be working for all the future ranges you will use.

<html ng-app="App">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
        angular.module('App', ['App.controllers']);
        angular.module('App.controllers', [])
        /* Modify angular to make it interpolate min and max, for ngModel when type = range */
        .config(['$provide', function($provide) {
            $provide.decorator('ngModelDirective', ['$delegate', function($delegate) {
                var ngModel = $delegate[0], controller = ngModel.controller;
                ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) {
                    if ('range' === attrs.type) {
                        var $interpolate = $injector.get('$interpolate');
                        attrs.$set('min', $interpolate(attrs.min || '')(scope));
                        attrs.$set('max', $interpolate(attrs.max || '')(scope));
                        $injector.invoke(controller, this, {
                            '$scope': scope,
                            '$element': element,
                            '$attrs': attrs
                        });
                    }
                }];
                return $delegate;
             }]);
         }])
         .controller('AppController', function($scope) {
             $scope.min = 50;
             $scope.max = 150;
             $scope.value = 150;
         });			
</script>
</head>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" min="{{min}}" max="{{max}}" type="range"/>{{max}}<br/>
	value:{{value}}
</body>
</html>

edited Oct 24, 2014 at 18:52

mpromonet

12.1k45 gold badges69 silver badges99 bronze badges

answered Oct 19, 2014 at 20:30

M'sieur Toph'

2,6761 gold badge25 silver badges37 bronze badges

3 Comments

M'sieur Toph' Over a year ago

OK, I see what you mean. The cleanest then, is to configure angular engine directly. I edited my answer, try this new snippet ... and tell me...

mpromonet Over a year ago

I unaccept your answer because it works by side effects. Replacing attrs.$set('max', $interpolate(attrs.max || '')(scope)); with attrs.$set('max', ''); sill trig the update. It doesnot works with 2 sliders and this bug is referenced in angularJs issues github.com/angular/angular.js/issues/6726

M'sieur Toph' Over a year ago

You are right, the pb was about the cursor value and not the range setup. Sorry about that, I did not get it by the time. But for a reason I don't really understand my workaround still does work : plnkr.co/edit/VuqxFv4Ni72TYbK00dqp?p=preview (even with two sliders)

hipnosis · Accepted Answer · 2015-11-17 17:45:00Z

2

My lazy way of addressing this bug was to divide the min/max and step values by 100. So 300 becomes 3.0, etc. and values fall below 100. Then I multiply things back as needed.

answered Nov 17, 2015 at 17:45

hipnosis

6281 gold badge8 silver badges13 bronze badges

Comments

mpromonet · Accepted Answer · 2017-05-01 08:53:23Z

0

Since this commit, the initial code give the expected result.
Using release 1.6.0 allow to original code to show slider correctly :

<html ng-app="App">
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
	<script>
		angular.module('App', ['App.controllers']);
		angular.module('App.controllers', []).controller('AppController', function($scope) {
			$scope.min = 50;
			$scope.max = 150;
			$scope.value = 150;
		});		
	</script>
</head>
<body ng-controller="AppController" >
	{{min}}<input ng-model="value" min="{{min}}" max="{{max}}" type="range" />{{max}}<br/>
	value:{{value}}
</body>
</html>

edited May 1, 2017 at 8:53

answered Aug 12, 2016 at 22:00

mpromonet

12.1k45 gold badges69 silver badges99 bronze badges

Collectives™ on Stack Overflow

How to initialize the value of an input[range] using AngularJS when value is over 100

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related