title: <input type=range> mousedown event: differentiate between knob and slider?
body: <p>On a range input's <code>mousedown</code> event, is there a way to determine whether the user clicked on the "knob" of the range input, or the surrounding slider track?</p>
  
  <p>It seems like this might be possible, I'm just not sure what attribute to look at. See the JS console below. First I click the knob, triggering <code>mousedown</code>, then <code>click</code>. Then, I click the slider, triggering <code>mousedown</code>, then <code>input</code> (because the value changes with this action), then <code>click</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/rMrWu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rMrWu.png" alt="JS console of range input events"></a></p>
  
  <p>I'm logging out the event object like this:</p>
  
  <pre><code>onMouseDown(e) {
      console.log('mousedown!', e);
  }
  </code></pre>
  
  <p>You can see it looks slightly different when I click the knob vs the slider track, but this may not be meaningful. Is there a differentiating piece of data I can grab onto here?</p>
  
  <p>This is related to an older question: <a href="https://stackoverflow.com/questions/20387534/prevent-mousedown-event-on-input-range-html-element-and-still-let-user-drag-slid">Prevent mousedown event on input range html element and still let user drag slider</a></p>