title: handling 'this' in an addEventListener
body: <p>I want to call <code>handleRangeUpdate</code> in such a way that it would be dependent on the event which it is called so that it can decide to execute <code>console.log(this.value)</code></p>
  
  <p>However upon passing <code>e</code> into <code>handleRangeUpdate</code> through the <code>addEventListener</code>, the value of <code>this</code> then changes from <code>input</code> to <code>window</code>, or to <code>handleRangeUpdate</code> not being called at all, depending if I used arrow functions or tried to bind/call <code>this</code> to the listener.</p>
  
  <p>My issue and question is this (no pun intended), how do I pass the proper <em>this</em> to the listener in <code>addEventListener</code>?</p>
  
  <pre><code>const sliders = player.querySelectorAll('.player__slider');
  sliders.forEach(slider =&gt; slider.addEventListener('change', handleRangeUpdate));
  sliders.forEach(slider =&gt; slider.addEventListener('mousemove', handleRangeUpdate));
  </code></pre>
  
  <p>and the html for the sliders:</p>
  
  <pre><code>&lt;input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1"&gt;
  &lt;input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1"&gt;
  </code></pre>