I have encountered an issue where this code works fine in all major browsers, but Edge only shows the valid value in the DOM inspector. The page still displays the old value. Why is this happening?
(function (angular, module) {
'use strict';
module
.directive('psEffectsDurationSlider', EffectsDurationSlider);
EffectsDurationSlider.$inject = [];
function EffectsDurationSlider() {
return {
require: 'ngModel',
restrict: 'E',
link: link
};
function link(scope, element, attrs, ngModel) {
ngModel.$render = render;
activate();
function initializeSlider() {
element.slider({
min: 0.2,
max: 2,
step: 0.1,
animate: true,
orientation: 'horizontal',
range: 'min',
slide: onSliderChange
});
}
function render() {
element.slider('value', ngModel.$viewValue);
}
function onSliderChange(event, ui) {
ngModel.$setViewValue(ui.value);
}
function onScopeDestroy() {
element.slider('destroy');
}
function activate() {
initializeSlider();
scope.$on('$destroy', onScopeDestroy);
}
}
}
})(window.angular, window.angular.module('...'));
Screenshot from Edge with valid value in the DOM inspector and invalid result at the page: https://i.stack.imgur.com/QP49c.png