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=".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>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./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./questions/15656617/… – PSL Commented Oct 19, 2014 at 18:09
- There are some interesting discussions related to this here as well. github./angular/angular.js/issues/2404 – 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 Commented Oct 19, 2014 at 20:03
4 Answers
Reset to default 5After searches and tries , a possible way is to define a custom directive :
<html ng-app="App">
<head>
<script src="https://ajax.googleapis./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.
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./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>My lazy way of addressing this bug was to divide the min/max and step values by 100. So 300 bees 3.0, etc. and values fall below 100. Then I multiply things back as needed.
Since this mit, 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./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>