I faced this situation using AngularJS, this was the reason of the post How to initialize the value of an input[range] using AngularJS when value is over 100How to initialize the value of an input[range] using AngularJS when value is over 100.
I was wondering that Angular2 manage better initialization of a value that is outside the default range [0,100] and inside a [min,max] range.
The code I build trying to learn Angular2, is nearly a translation of the previous 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>Running this snippet give this result :
The slider is at the position 100, but it should be at position 150. The expecting result is :
Is there a way to set consistently the 3 values (min, max and value), without the limitation of [0,100] for the value ?
Is it possible to update the DOM after initializing range and before setting the initial value ?
