0

I try to bind events to slider button.

Here is my slider button html:

 <input id="swipe" type="range" style="width: 100%">

And here is Javascript function where I try to bind events: 

   function createMap() {

    var swipe = document.getElementById('swipe');

    var bing = new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: 'My Bing Map sKey',
            imagerySet: 'Aerial'
        })
    });

    bing.on('precompose', function (event) {

        var ctx = event.context;
        var width = ctx.canvas.width * (swipe.value / 100);

        ctx.save();
        ctx.beginPath();
        ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
        ctx.clip();
    });

    bing.on('postcompose', function (event) {
        var ctx = event.context;
        ctx.restore();
    });

    swipe.addEventListener('input', function () {
        map.render();
    }, false);

}

As you can see above I have swipe.addEventListener that have to be triggered whenever I move the slider.

But swipe.addEventListener does not fire when I move the slider, it seems that event not added.

Any idea why event not added? and how to fix it?

UPDATE

I get this warning whenever I move slider:

The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?
Orlandster
  • 4,706
  • 2
  • 30
  • 45
Michael
  • 13,950
  • 57
  • 145
  • 288
  • I seem to remember it's a bit flaky and behaves differently cross browser - you might have to bind to both `input` and `change` (and then do some handling for any browser that supports both)? – delinear Oct 18 '17 at 12:13
  • 1
    Possible duplicate of [onchange event on input type=range is not triggering in firefox while dragging](https://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging) – Carsten Løvbo Andersen Oct 18 '17 at 12:16
  • Add a `console.log()` inside your event to check if it's firing. Also, "NaN" means "Not a Number" which means that probably some of your variables are "NaN" to begin with. I would use `console.log` to check the value of every variable and see where is the problem. – VTodorov Oct 18 '17 at 12:29

0 Answers0