Input Range

no-jQuery cross-browser desktop-and-mobile ability to consistently respond to range/slider interactions

by borisjavier

HTML

<input type="range" min="10" max="1000" step="10" id="s" value="500"/>
<p id="rangeValPar">range value: 500</p>

JavaScript

// main function for emulating IE11's "change" event:

function onRangeChange(rangeInputElmt, listener) {

  var inputEvtHasNeverFired = true;

  var rangeValue = {
    current: undefined,
    mostRecent: undefined
  };

  rangeInputElmt.addEventListener("input", function(evt) {
    inputEvtHasNeverFired = false;
    rangeValue.current = evt.target.value;
    if (rangeValue.current !== rangeValue.mostRecent) {
      listener(evt);
    }
    rangeValue.mostRecent = rangeValue.current;
  });

  rangeInputElmt.addEventListener("change", function(evt) {
    if (inputEvtHasNeverFired) {
      listener(evt);
    }
  });

}



var myRangeInputElmt = document.querySelector("#s"); //getElementById('s');//querySelector("input");
var myRangeValPar = document.querySelector("#rangeValPar");


var myNumEvts = {
  input: 0,
  change: 0,
  custom: 0
};


var myListener = function(myEvt) {
  myNumEvts["custom"] += 1;
  myRangeValPar.innerHTML = "range value: " + myEvt.target.value;
  //myUpdate();
};

onRangeChange(myRangeInputElmt, myListener);