Angular.js: ng-model does not set initial value and position of input[type=range]
Basically, a range input is set up with an initial value using ng-model. The actual value of the HTML element, and the position of the range slider, are incorrect. I would expect the slider position and html input value to be in sync with the model variable.
Here is a repro: http://jsfiddle.net/fschwiet/HVp2J/
Verified on chrome and firefox running on Windows 8.
I see there are other issues opened for input[type=range], its not clear they are related.
fschwiet
All 35 comments
This is still an issue with Angular 1.2.14: http://jsfiddle.net/HVp2J/7/
IgorMinar
on 18 Mar 2014
As a work-around, one can set the model value within a $timeout handler.
fschwiet
on 18 Mar 2014
$timeout doesn' help, the issue remains.
@fschwiet : http://jsfiddle.net/HVp2J/9/
Rajat-Chowdhary
on 18 Mar 2014
@Rajat-Chowdhary Sorry, I should have included a code sample showing how $timeout can work as work-around: http://jsfiddle.net/fschwiet/YC4av/
The workaround does feel dicey since the model value cannot be initialized until the $timeout callback for the workaround to work.
fschwiet
on 18 Mar 2014
It seems I found the problem.
Angular sets value before setting min, max and step so it seems that the range is in the wrong position. To solve the problem I used this directive
angular.module('angular-range', []).directive('range', function() {
return {
replace: true,
restrict: 'E',
scope: {
value: '=ngModel',
min: '=rangeMin',
max: '=rangeMax',
step: '=rangeStep',
},
template: '<input type="range"/>',
link: function(scope, iElement, iAttrs) {
scope.$watch('min', function() { setValue(); });
scope.$watch('max', function() { setValue(); });
scope.$watch('step', function() { setValue(); });
scope.$watch('value', function() { setValue(); });
function setValue() {
if (
angular.isDefined(scope.min) &&
angular.isDefined(scope.max) &&
angular.isDefined(scope.step) &&
angular.isDefined(scope.value)
) {
iElement.attr("min", scope.min);
iElement.attr("max", scope.max);
iElement.attr("step", scope.step);
iElement.val(scope.value);
}
}
function read() {
scope.value = iElement.val();
}
iElement.on('change', function() {
scope.$apply(read);
});
}
};
});
ardf69
on 24 Apr 2014
Here there is the new version of ngRange without private scope:
.module('ngRange', [])
.directive('ngRange', function() {
return {
replace: true,
restrict: 'E',
require: 'ngModel',
template: '<input type="range"></input>',
link: function(scope, element, attrs, ngModel) {
var ngRangeMin;
var ngRangeMax;
var ngRangeStep;
var value;
if (!angular.isDefined(attrs.ngRangeMin)) {
ngRangeMin = 0;
} else {
scope.$watch(attrs.ngRangeMin, function(newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
ngRangeMin = newValue;
setValue();
}
});
}
if (!angular.isDefined(attrs.ngRangeMax)) {
ngRangeMax = 100;
} else {
scope.$watch(attrs.ngRangeMax, function(newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
ngRangeMax = newValue;
setValue();
}
});
}
if (!angular.isDefined(attrs.ngRangeStep)) {
ngRangeStep = 1;
} else {
scope.$watch(attrs.ngRangeStep, function(newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
ngRangeStep = newValue;
setValue();
}
});
}
if (!angular.isDefined(ngModel)) {
value = 50;
} else {
scope.$watch(
function () {
return ngModel.$modelValue;
},
function(newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
value = newValue;
setValue();
}
}
);
}
function setValue() {
if (
angular.isDefined(ngRangeMin) &&
angular.isDefined(ngRangeMax) &&
angular.isDefined(ngRangeStep) &&
angular.isDefined(value)
) {
element.attr("min", ngRangeMin);
element.attr("max", ngRangeMax);
element.attr("step", ngRangeStep);
element.val(value);
}
}
function read() {
if (angular.isDefined(ngModel)) {
ngModel.$setViewValue(value);
}
}
element.on('change', function() {
if (angular.isDefined(value) && (value != element.val())) {
value = element.val();
scope.$apply(read);
}
});
}
};
});
this is still an issue, right?
zavidovych
on 3 Dec 2014
Yep +1
sabhiram
on 30 Dec 2014
Yes, still an issue.
kelle62819
on 6 Jan 2015
I asked something similar in stackoverflow How to initialize the value of an input[range] using AngularJS when value is over 100 . Using 1.4.0-beta.build.3791 this bug is still present.
mpromonet
on 17 Jan 2015
+1
bastianwegge
on 28 May 2015
+1, and it became worst when the input range is coupled with an input number.
Yimiprod
on 3 Jun 2015
+1 for this issue
mrbinky3000
on 9 Jun 2015
Facing the same problem: +1
Tooa
on 14 Jun 2015
yep - same problem +1
larpo1
on 15 Jun 2015
this is basic html5 - whats the status on this, is anyone working on this?
onemenny
on 28 Jun 2015
taking under consideration this: https://github.com/danielcrisp/angular-rangeslider/issues/51
where Error: ngModel:numfmt range slider is thrown
i adjusted @ardf69 solution to this:
angular.module('common').directive('rangeSlider', [function () {
return {
replace: true,
restrict: 'E',
require: 'ngModel',
template: '<input type="range"/>',
link: function (scope, element, attrs, ngModel) {
var ngRangeMin;
var ngRangeMax;
var ngRangeStep;
var value;
function init() {
if (!angular.isDefined(attrs.ngRangeMin)) {
ngRangeMin = 0;
} else {
scope.$watch(attrs.ngRangeMin, function (newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
ngRangeMin = newValue;
setValue();
}
});
}
if (!angular.isDefined(attrs.ngRangeMax)) {
ngRangeMax = 100;
} else {
scope.$watch(attrs.ngRangeMax, function (newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
ngRangeMax = newValue;
setValue();
}
});
}
if (!angular.isDefined(attrs.ngRangeStep)) {
ngRangeStep = 1;
} else {
scope.$watch(attrs.ngRangeStep, function (newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
ngRangeStep = newValue;
setValue();
}
});
}
if (!angular.isDefined(ngModel)) {
value = 50;
} else {
scope.$watch(
function () {
return ngModel.$modelValue;
},
function (newValue, oldValue, scope) {
if (angular.isDefined(newValue)) {
value = newValue;
setValue();
}
}
);
}
if (!ngModel) {
return;
}
ngModel.$parsers.push(function (value) {
var val = Number(value);
if (val !== val) {
val = undefined;
}
return val;
});
}
function setValue() {
if (
angular.isDefined(ngRangeMin) &&
angular.isDefined(ngRangeMax) &&
angular.isDefined(ngRangeStep) &&
angular.isDefined(value)
) {
element.attr("min", ngRangeMin);
element.attr("max", ngRangeMax);
element.attr("step", ngRangeStep);
element.val(value);
}
}
function read() {
if (angular.isDefined(ngModel)) {
ngModel.$setViewValue(value);
}
}
element.on('change', function () {
if (angular.isDefined(value) && (value != element.val())) {
value = element.val();
scope.$apply(read);
}
});
init();
}
};
}
]);
+1, I have the same problem when switching[input type=range] with ng-if
radek-anuszewski
on 10 Jul 2015
I also ran into this problem, and wrote a Stack Overflow question about it, “In Angular, bind attribute from scope variable _before_ ngModel binds the input’s value”. The question includes a runnable code snippet that reproduces this problem.
Some workarounds have been posted as answers on Stack Overflow. The one applicable to my case involves using DOM manipulation with $inputElement.prop() to set the values of min, max, and step (whichever attributes are needed). By doing this DOM manipulation before my custom directive’s underlying <input>’s value is first set, I avoid the problem.
roryokane
on 25 Oct 2015
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. Perhaps it's useful to someone.
4string
on 17 Nov 2015
+1 This is very annoying.
jwittner
on 28 Jan 2016
+1
berkaey
on 22 Feb 2016
+1
westcode
on 23 Feb 2016
+1
Sithdown
on 27 Feb 2016
Another lazy workaround hack:
$timeout(function () {
angular.element('.slider-input').val(amount);
});
davedx
on 1 Mar 2016
+1
cue232s
on 14 Mar 2016
With GitHub’s new Reactions feature, you no longer need to comment “+1”. Instead, you can mark your interest by clicking the “+:smile:” at the top-right of the first comment in this issue, then choosing :+1: (“+1”). This avoids sending a useless notification to everyone subscribed to this issue.
roryokane
on 15 Mar 2016
I have solved my problem using ondrag method by removing ng-model.
check this http://codepen.io/nagarajumusini/pen/BKpGJz
nagarajumusini
on 18 Mar 2016
+1
marianmazarovici
on 13 Apr 2016
+1
felixschul
on 18 May 2016
Adding ng-init to input works for me to set initial value
<input type="range" class="slider-years" min="0" max="30" step="1" value="0" data-ng-model="metier.anneeExperience" data-ng-init="metier.anneeExperience ? metier.anneeExperience = metier.anneeExperience : metier.anneeExperience = 0" />
Found solution in:
Jerome2606
on 22 May 2016
We are working on this (finally). Closing as a duplicate of https://github.com/angular/angular.js/issues/5892
Narretz
on 5 Jul 2016
$(document).ready(function () {
angular.element('.yourclasshere').val(valueoftheslideronload);
});
this jQuery workaround works so you can set a value when the page loads but whatever ithe value of the slider controls wont sync until it's touched.
jacobbullock95
on 6 Jul 2016
@davedx Maybe this is the best way before the issue is solved.
mrdulin
on 3 Aug 2016
<input type="range" min="15"
data-ng-init="signup.age=30" value="30" max="85" step="1"
name="ageInput" class="form-control input-lg" ng-model="signup.age"
oninput="ageOutputId.value = ageInput.value" />
<output name="ageOutputName" id="ageOutputId">30</output>
AhmadRedha
on 1 Oct 2016
Related issues
th0r
·
3Comments
awerlang
·
3Comments
piu
·
3Comments
jpsimons
·
3Comments
landed1
·
3Comments
Most helpful comment
With GitHub’s new Reactions feature, you no longer need to comment “+1”. Instead, you can mark your interest by clicking the “+:smile:” at the top-right of the first comment in this issue, then choosing :+1: (“+1”). This avoids sending a useless notification to everyone subscribed to this issue.