4

On a range input's mousedown event, is there a way to determine whether the user clicked on the "knob" of the range input, or the surrounding slider track?

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 mousedown, then click. Then, I click the slider, triggering mousedown, then input (because the value changes with this action), then click.

JS console of range input events

I'm logging out the event object like this:

onMouseDown(e) {
    console.log('mousedown!', e);
}

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?

This is related to an older question: Prevent mousedown event on input range html element and still let user drag slider

  • 1
    Hi nnyby, I added my answer to the other question. See if that suits your needs. – Roy Scheffers Aug 24 '18 at 15:03
  • 2
    @RoyScheffers Thanks, but that solution prevents me from handling the mousedown event when the user clicks the range's track. I've worked around this by tracking the dragging state via mousedown, mouseup, and mousemove. See: compiled.ctl.columbia.edu/articles/… – nnyby Aug 24 '18 at 19:25
  • Nice article nnyby! And good job on finding a solution. Unfortunately, I found a bug in it. To reproduce it, click on the slider track, a bit before or after the thumb. Keep holding down the mouse button, and then start dragging along the track. You'll see that the thumb all of a sudden catches up where the mouse is and the user is still able to point and click the slider when the mouse is even moved a little. – Roy Scheffers Aug 24 '18 at 23:19
  • @RoyScheffers Hah yeah.. i've definitely noticed that.. It's unfortunate but I think this situation is better than having the knob not freely draggable. Let me know if you have any suggestions on this. – nnyby Aug 25 '18 at 15:19

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.