After encountering a similar issue with AngularJS, I posted a question on StackOverflow titled How to initialize the value of an input[range] using AngularJS when value is over 100. As I dive into learning Angular2, I am curious if it handles initialization of values outside the default range more efficiently, specifically within a custom [min, max] range.
In my attempt to understand Angular2 better, I created code that closely resembles my previous AngularJS post:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.min.js"></script>
<script>
(function (app) {
app.AppComponent = ng.core.Component({
selector: 'my-app',
template: '{{ctrl.min}}<input type="range" [(ngModel)]="ctrl.value" min="{{ctrl.min}}" max="{{ctrl.max}}" />{{ctrl.max}}<br/>value:{{ctrl.value}}'
})
.Class({
constructor: function() {
this.ctrl = { min:50, max:150, value:150};
}
});
})(window.app || (window.app = {}));
(function (app) {
document.addEventListener('DOMContentLoaded', function () {
ng.platform.browser.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>The current result when running this code snippet can be seen here: https://i.stack.imgur.com/qO39n.jpg
However, the slider should be positioned at 150 instead of 100. The expected outcome is shown in this image: https://i.stack.imgur.com/6uVE4.jpg
Is there a way to consistently set the values of min, max, and position without being restricted by the [0,100] range for the value?
Furthermore, is there a method to update the DOM after initializing the range but before setting the initial value?