diff --git a/examples/cluster.js b/examples/cluster.js
index 125325b20f..18aa6cd223 100644
--- a/examples/cluster.js
+++ b/examples/cluster.js
@@ -77,13 +77,17 @@ const map = new Map({
   }),
 });
 
-distanceInput.addEventListener('input', function () {
+const distanceHandler = function () {
   clusterSource.setDistance(parseInt(distanceInput.value, 10));
-});
+};
+distanceInput.addEventListener('input', distanceHandler);
+distanceInput.addEventListener('change', distanceHandler);
 
-minDistanceInput.addEventListener('input', function () {
+const minDistanceHandler = function () {
   clusterSource.setMinDistance(parseInt(minDistanceInput.value, 10));
-});
+};
+minDistanceInput.addEventListener('input', minDistanceHandler);
+minDistanceInput.addEventListener('change', minDistanceHandler);
 
 map.on('click', (e) => {
   clusters.getFeatures(e.pixel).then((clickedFeatures) => {
diff --git a/examples/color-manipulation.js b/examples/color-manipulation.js
index dade6aeed2..72f4bf9ec8 100644
--- a/examples/color-manipulation.js
+++ b/examples/color-manipulation.js
@@ -166,10 +166,12 @@ const controlIds = ['hue', 'chroma', 'lightness'];
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function () {
+  const listener = function () {
     output.innerText = control.value;
     raster.changed();
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
   output.innerText = control.value;
   controls[id] = control;
 });
diff --git a/examples/disable-image-smoothing.js b/examples/disable-image-smoothing.js
index 0a6b23923a..13d462ba6d 100644
--- a/examples/disable-image-smoothing.js
+++ b/examples/disable-image-smoothing.js
@@ -56,10 +56,12 @@ imagery.on('prerender', function (evt) {
 
 const control = document.getElementById('opacity');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   imagery.setOpacity(control.value / 100);
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 imagery.setOpacity(control.value / 100);
 
diff --git a/examples/igc.js b/examples/igc.js
index 99e3d8dc86..a73838b6d0 100644
--- a/examples/igc.js
+++ b/examples/igc.js
@@ -179,8 +179,9 @@ const featureOverlay = new VectorLayer({
   }),
 });
 
-document.getElementById('time').addEventListener('input', function () {
-  const value = parseInt(this.value, 10) / 100;
+const control = document.getElementById('time');
+const listener = function () {
+  const value = parseInt(control.value, 10) / 100;
   const m = time.start + time.duration * value;
   vectorSource.forEachFeature(function (feature) {
     const geometry =
@@ -198,4 +199,6 @@ document.getElementById('time').addEventListener('input', function () {
     }
   });
   map.render();
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
diff --git a/examples/layer-group.js b/examples/layer-group.js
index c85ad3f72d..12f9b87141 100644
--- a/examples/layer-group.js
+++ b/examples/layer-group.js
@@ -49,7 +49,7 @@ function bindInputs(layerid, layer) {
   visibilityInput.prop('checked', layer.getVisible());
 
   const opacityInput = $(layerid + ' input.opacity');
-  opacityInput.on('input', function () {
+  opacityInput.on('input change', function () {
     layer.setOpacity(parseFloat(this.value));
   });
   opacityInput.val(String(layer.getOpacity()));
diff --git a/examples/layer-swipe.js b/examples/layer-swipe.js
index cf457a4b94..8e6cd5c35c 100644
--- a/examples/layer-swipe.js
+++ b/examples/layer-swipe.js
@@ -57,10 +57,8 @@ aerial.on('postrender', function (event) {
   ctx.restore();
 });
 
-swipe.addEventListener(
-  'input',
-  function () {
-    map.render();
-  },
-  false
-);
+const listener = function () {
+  map.render();
+};
+swipe.addEventListener('input', listener);
+swipe.addEventListener('change', listener);
diff --git a/examples/region-growing.js b/examples/region-growing.js
index c8e293b26e..26477b7345 100644
--- a/examples/region-growing.js
+++ b/examples/region-growing.js
@@ -137,7 +137,9 @@ function updateControlValue() {
 }
 updateControlValue();
 
-thresholdControl.addEventListener('input', function () {
+const listener = function () {
   updateControlValue();
   raster.changed();
-});
+};
+thresholdControl.addEventListener('input', listener);
+thresholdControl.addEventListener('change', listener);
diff --git a/examples/sea-level.js b/examples/sea-level.js
index 7d6e036b2c..2c5100de4c 100644
--- a/examples/sea-level.js
+++ b/examples/sea-level.js
@@ -67,10 +67,12 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   raster.changed();
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 
 raster.on('beforeoperations', function (event) {
diff --git a/examples/shaded-relief.js b/examples/shaded-relief.js
index 0ef7f2b5ba..7ed0a2569c 100644
--- a/examples/shaded-relief.js
+++ b/examples/shaded-relief.js
@@ -159,10 +159,12 @@ const controls = {};
 controlIds.forEach(function (id) {
   const control = document.getElementById(id);
   const output = document.getElementById(id + 'Out');
-  control.addEventListener('input', function () {
+  const listener = function () {
     output.innerText = control.value;
     raster.changed();
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
   output.innerText = control.value;
   controls[id] = control;
 });
diff --git a/examples/webgl-sea-level.js b/examples/webgl-sea-level.js
index 7490d17b5f..b985d17322 100644
--- a/examples/webgl-sea-level.js
+++ b/examples/webgl-sea-level.js
@@ -71,10 +71,12 @@ const map = new Map({
 
 const control = document.getElementById('level');
 const output = document.getElementById('output');
-control.addEventListener('input', function () {
+const listener = function () {
   output.innerText = control.value;
   elevation.updateStyleVariables({level: parseFloat(control.value)});
-});
+};
+control.addEventListener('input', listener);
+control.addEventListener('change', listener);
 output.innerText = control.value;
 
 const locations = document.getElementsByClassName('location');
diff --git a/examples/webgl-shaded-relief.js b/examples/webgl-shaded-relief.js
index 44cb70c8f0..4b8c501f1d 100644
--- a/examples/webgl-shaded-relief.js
+++ b/examples/webgl-shaded-relief.js
@@ -67,10 +67,12 @@ controlIds.forEach(function (id) {
     variables[id] = Number(control.value);
   }
   updateValues();
-  control.addEventListener('input', () => {
+  const listener = function () {
     updateValues();
     shadedRelief.updateStyleVariables(variables);
-  });
+  };
+  control.addEventListener('input', listener);
+  control.addEventListener('change', listener);
 });
 
 const map = new Map({
diff --git a/examples/webgl-tile-style.js b/examples/webgl-tile-style.js
index fce4addba1..7ba885f855 100644
--- a/examples/webgl-tile-style.js
+++ b/examples/webgl-tile-style.js
@@ -38,18 +38,20 @@ const map = new Map({
   }),
 });
 
-for (const name in variables) {
+let variable;
+for (variable in variables) {
+  const name = variable;
   const element = document.getElementById(name);
   const value = variables[name];
   element.value = value.toString();
-  document.getElementById(`${name}-value`).innerText = `(${value})`;
-
-  element.addEventListener('input', function (event) {
+  document.getElementById(name + '-value').innerText = value.toFixed(2);
+  const listener = function (event) {
     const value = parseFloat(event.target.value);
-    document.getElementById(`${name}-value`).innerText = `(${value})`;
-
+    document.getElementById(name + '-value').innerText = value.toFixed(2);
     const updates = {};
     updates[name] = value;
     layer.updateStyleVariables(updates);
-  });
+  };
+  element.addEventListener('input', listener);
+  element.addEventListener('change', listener);
 }
diff --git a/examples/wmts-dimensions.js b/examples/wmts-dimensions.js
index 5a363475e6..901554b14e 100644
--- a/examples/wmts-dimensions.js
+++ b/examples/wmts-dimensions.js
@@ -61,13 +61,11 @@ const map = new Map({
   ],
 });
 
-const updateSourceDimension = function (source, sliderVal) {
-  source.updateDimensions({'threshold': sliderVal});
-  document.getElementById('theinfo').innerHTML = sliderVal + ' meters';
+const slider = document.getElementById('slider');
+const updateSourceDimension = function () {
+  wmtsSource.updateDimensions({'threshold': slider.value});
+  document.getElementById('theinfo').innerHTML = slider.value + ' meters';
 };
-
-updateSourceDimension(wmtsSource, 10);
-
-document.getElementById('slider').addEventListener('input', function () {
-  updateSourceDimension(wmtsSource, this.value);
-});
+slider.addEventListener('input', updateSourceDimension);
+slider.addEventListener('change', updateSourceDimension);
+updateSourceDimension();
diff --git a/src/ol/style/expressions.js b/src/ol/style/expressions.js
index 37e371e6f2..f34da179cd 100644
--- a/src/ol/style/expressions.js
+++ b/src/ol/style/expressions.js
@@ -5,6 +5,7 @@
 
 import {Uniforms} from '../renderer/webgl/TileLayer.js';
 import {asArray, isStringColor} from '../color.js';
+import {log2} from '../math.js';
 
 /**
  * Base type used for literal style parameters; can be a number literal or the output of an operator,
@@ -173,7 +174,7 @@ export function getValueType(value) {
  * @return {boolean} True if only one type flag is enabled, false if zero or multiple
  */
 export function isTypeUnique(valueType) {
-  return Math.log2(valueType) % 1 === 0;
+  return log2(valueType) % 1 === 0;
 }
 
 /**
diff --git a/src/ol/webgl/Buffer.js b/src/ol/webgl/Buffer.js
index d15b54312f..92ac10946a 100644
--- a/src/ol/webgl/Buffer.js
+++ b/src/ol/webgl/Buffer.js
@@ -73,7 +73,10 @@ class WebGLArrayBuffer {
    * @param {Array<number>} array Numerical array
    */
   fromArray(array) {
-    this.array = getArrayClassForType(this.type).from(array);
+    const arrayClass = getArrayClassForType(this.type);
+    this.array = arrayClass.from
+      ? arrayClass.from(array)
+      : new arrayClass(array);
   }
 
   /**